Why is my hidden table not being revealed on button click?

Question

I created a table that has its display value initially set to none within the css. In my JavaScript code I created a function that should reveal this table. After this function, I added an event listener to a button to execute the function on click. Although, the table is not displayed.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
        <title>App Decision Recommendation</title>
        <link href='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/css/bootstrap.css' rel='stylesheet'>
        <script src='http://lmgrintranet02/jsfiles/jquery/jquery-3.2.1.min.js'></script>
        <script src='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/js/bootstrap.min.js'></script>
    </head>
    <style>
        #inputNotes{width: 413px; font-family: 'Courier New', Courier, monospace;}  /*This pixel width only allows for 40 characters per line*/
        #resultTable {width: 50%; display:none;}
    </style>
    <script>
        function loadTable(){
            // TODO
        }

        function showTable(){
            document.getElementById('resultTable').style.display="block";
        }

        var btn = document.getElementById("okBtn");
        btn.addEventListener("click",loadTable);
        btn.addEventListener("click",showTable);

    </script>
    <body>
        <div class="card">
            <div class="card-header"><h4>App Decision Recommendation</h4></div>
        </div>
        <div class="container">
            <div class="row mt-4">
                <div class="col">
                    <label for="inputGroupSelect" class="form-label">Application</label>
                    <div class="input-group mb-3">
                        <select class="custom-select" id="inputGroupSelect">
                          <option selected>Choose...</option>
                          <option value="1">Approve</option>
                          <option value="2">Counter</option>
                          <option value="3">Decline</option>
                        </select>
                      </div>
                </div>
                <div class="col">
                    <label for="inputApprovalAmount" class="form-label">Approval Amount</label>
                    <input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input">
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <label for="inputProcessorCode" class="form-label">Processor Code</label>
                    <input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input">
                    <label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label>
                    <div class="input-group">
                        <select class="custom-select" id="inputGroupSelect">
                          <option selected>Choose...</option>
                          <option value="1">Approve</option>
                          <option value="2">Counter</option>
                          <option value="3">Decline</option>
                        </select>
                      </div>
                </div>
                <div class="col">
                    <label for="inputNotes" class="form-label">Notes</label>
                    <textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    
                </div>
                <div class="col mt-4">
                    <button type="button" class="btn btn-primary" id="okBtn">OK</button>
                </div>
            </div>
        </div>
        <div class="container mt-4" id="resultTable">
            <table class="table table-bordered">
                <tr>
                    <td colspan="2">Loan App 3092</td>
                </tr>
                <tbody>
                    <tr>
                        <th scope="row">Processor Code</th>
                        <td>0023</td>
                    </tr>
                    <tr>
                        <th scope="row">Approval Amount</th>
                        <td>$4000.00</td>
                    </tr>
                    <tr>
                        <th scope="row">Recommended Decision</th>
                        <td>Approve</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Any help is appreciated, thanks!

You are likely getting errors in your console about `addEventListener` not existing on null... — Heretic Monkey, Oct 18 '21 at 20:47

score 0 · Answer 1 · answered Oct 18 '21 at 20:37

You have to fix the importation of bootstrap.

I change link from the getting started of bootstrap docs.

For me, everything is fine:

function loadTable(){
    // TODO
}

function showTable(){
    document.getElementById('resultTable').style.display="block";
}

var btn = document.getElementById("okBtn");
btn.addEventListener("click",loadTable);
btn.addEventListener("click",showTable);

#inputNotes {
  width: 413px;
  font-family: 'Courier New', Courier, monospace;
}  /*This pixel width only allows for 40 characters per line*/
#resultTable {
  width: 50%;
  display:none;
}

<head>
   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="card">
       <div class="card-header"><h4>App Decision Recommendation</h4></div>
    </div>
    <div class="container">
        <div class="row mt-4">
            <div class="col">
                <label for="inputGroupSelect" class="form-label">Application</label>
                <div class="input-group mb-3">
                    <select class="custom-select" id="inputGroupSelect">
                      <option selected>Choose...</option>
                      <option value="1">Approve</option>
                      <option value="2">Counter</option>
                      <option value="3">Decline</option>
                    </select>
                  </div>
            </div>
            <div class="col">
                <label for="inputApprovalAmount" class="form-label">Approval Amount</label>
                <input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input">
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <label for="inputProcessorCode" class="form-label">Processor Code</label>
                <input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input">
                <label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label>
                <div class="input-group">
                    <select class="custom-select" id="inputGroupSelect">
                      <option selected>Choose...</option>
                      <option value="1">Approve</option>
                      <option value="2">Counter</option>
                      <option value="3">Decline</option>
                    </select>
                  </div>
            </div>
            <div class="col">
                <label for="inputNotes" class="form-label">Notes</label>
                <textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">

            </div>
            <div class="col mt-4">
                <button type="button" class="btn btn-primary" id="okBtn">OK</button>
            </div>
        </div>
    </div>
    <div class="container mt-4" id="resultTable">
        <table class="table table-bordered">
            <tr>
                <td colspan="2">Loan App 3092</td>
            </tr>
            <tbody>
                <tr>
                    <th scope="row">Processor Code</th>
                    <td>0023</td>
                </tr>
                <tr>
                    <th scope="row">Approval Amount</th>
                    <td>$4000.00</td>
                </tr>
                <tr>
                    <th scope="row">Recommended Decision</th>
                    <td>Approve</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

Maik Lowrey · Accepted Answer · 2021-10-18T21:31:04.577

The code is fine. Only one thing has struck me now. Put your javascript block at the bottom. just before the closing body Tag.

And you dont must apply two EventListeners to the same Button. You can make an new function like handleClickEvent() and inside this funktion you call loadTable and showTable function.

const btn = document.getElementById("okBtn");
btn.addEventListener("click",handleClickEvent);

function handleClickEvent() {
    loadTable();
    showTable();
}

score 0 · Answer 3 · answered Oct 18 '21 at 20:54

<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'><meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
        <title>App Decision Recommendation</title>
        <link href='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/css/bootstrap.css' rel='stylesheet'>
        <script src='http://lmgrintranet02/jsfiles/jquery/jquery-3.2.1.min.js'></script>
        <script src='http://lmgrintranet02/jsfiles/bootstrap-4.0.0/js/bootstrap.min.js'></script>
    </head>
    <style>
        #inputNotes{width: 413px; font-family: 'Courier New', Courier, monospace;}  /*This pixel width only allows for 40 characters per line*/
        #resultTable {width: 50%; display:none;}
    </style>
    <script>
        function loadTable(){
            // TODO
        }

        function showTable(){
            document.getElementById('resultTable').style.display="block";
        }

    </script>
    <body>
        <div class="card">
            <div class="card-header"><h4>App Decision Recommendation</h4></div>
        </div>
        <div class="container">
            <div class="row mt-4">
                <div class="col">
                    <label for="inputGroupSelect" class="form-label">Application</label>
                    <div class="input-group mb-3">
                        <select class="custom-select" id="inputGroupSelect">
                          <option selected>Choose...</option>
                          <option value="1">Approve</option>
                          <option value="2">Counter</option>
                          <option value="3">Decline</option>
                        </select>
                      </div>
                </div>
                <div class="col">
                    <label for="inputApprovalAmount" class="form-label">Approval Amount</label>
                    <input type="text" id="inputApprovalAmount" class="form-control" aria-describedby="approvalAmount-input">
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    <label for="inputProcessorCode" class="form-label">Processor Code</label>
                    <input type="text" id="inputProcessorCode" class="form-control" aria-describedby="processorCode-input">
                    <label for="inputGroupSelect" class="form-label mt-4">Recommended Decision</label>
                    <div class="input-group">
                        <select class="custom-select" id="inputGroupSelect">
                          <option selected>Choose...</option>
                          <option value="1">Approve</option>
                          <option value="2">Counter</option>
                          <option value="3">Decline</option>
                        </select>
                      </div>
                </div>
                <div class="col">
                    <label for="inputNotes" class="form-label">Notes</label>
                    <textarea class="form-control" id="inputNotes" rows="3" cols="40" wrap="hard"></textarea>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col">
                    
                </div>
                <div class="col mt-4">
                    <button type="button" class="btn btn-primary" onclick="showTable();" id="okBtn">OK</button>
                </div>
            </div>
        </div>
        <div class="container mt-4" id="resultTable">
            <table class="table table-bordered">
                <tr>
                    <td colspan="2">Loan App 3092</td>
                </tr>
                <tbody>
                    <tr>
                        <th scope="row">Processor Code</th>
                        <td>0023</td>
                    </tr>
                    <tr>
                        <th scope="row">Approval Amount</th>
                        <td>$4000.00</td>
                    </tr>
                    <tr>
                        <th scope="row">Recommended Decision</th>
                        <td>Approve</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

you can directly call a JavaScript function on onclick event of ur button so try this to display function. — ravi singhal, Oct 18 '21 at 21:02

Why is my hidden table not being revealed on button click?

3 Answers3