What could be causing my secretive table to not show up when the button is clicked?

I have created a table with its display value initially set to none in the CSS. In my JavaScript code, I wrote a function to reveal this table. However, even after adding an event listener to a button to execute the function on click, the table is not being 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 assistance on resolving this issue would be greatly appreciated. Thank you!

Answer №1

Your code appears to be in good shape. One suggestion that comes to mind is to place your JavaScript block near the end of the document, right before the closing body tag.

Additionally, you don't need to assign two EventListeners to the same button. Instead, consider creating a new function like handleClickEvent() where you can call both loadTable and showTable functions.

const button = document.getElementById("okButton");
button.addEventListener("click", handleClickEvent);

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

Answer №2

It's crucial to resolve the issue with importing Bootstrap.

I updated the link from the Bootstrap documentation.

As far as I can tell, everything appears to be working correctly:

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>

Answer №3


<!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>Loan Approval Decision System</title>
        <link href='http://lmgrintranet03/jsfiles/bootstrap-5.0.2/css/bootstrap.css' rel='stylesheet'>
        <script src='http://lmgrintranet03/jsfiles/jquery/jquery-3.6.0.min.js'></script>
        <script src='http://lmgrintranet04/jsfiles/bootstrap-5.0.2/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 loadResults(){
            // TO DO
        }

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

    </script>
    <body>
        <div class="card">
            <div class="card-header"><h4>Loan Approval Decision System</h4></div>
        </div>
        <div class="container">
            <div class="row mt-4">
                <div class="col">
                    <label for="inputGroupSelect" class="form-label">Application Type</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">Approved 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 Action</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">Remarks</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="revealResults();" id="okBtn">OK</button>
                </div>
            </div>
        </div>
        <div class="container mt-4" id="resultTable">
            <table class="table table-bordered">
                <tr>
                    <td colspan="2">Approved Loan Application</td>
                </tr>
                <tbody>
                    <tr>
                        <th scope="row">Processor Code</th>
                        <td>0027</td>
                    </tr>
                    <tr>
                        <th scope="row">Approved Amount</th>
                        <td>$5000.00</td>
                    </tr>
                    <tr>
                        <th scope="row">Action Taken</th>
                        <td>Approve</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Separate line rendering of checkboxes in CSS and Vue

I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...

Styling WordPress twenty seventeen custom header with CSS tags

I have encountered a problem on my website where the custom header is causing issues on all pages except the home page. Specifically, in the custom header div element there is a style tag adding a margin-bottom of 82px. Despite searching through template p ...

The issue of continuous requests in AngularJS controllers

In my controller, I have a simple function that calculates the number of answers for each question: $scope.countAnswers = function(questionid) { AnswersQueries.getAnswers(questionid, function(answers) { var answersCount = answers.length; return ...

Troubleshooting the Ineffectiveness of the CSS Custom Property Url in Asp .Net

Working on styling some cards within an MVC project, I have a custom property in my CSS file called "--bg-img" which is defined as follows: background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))) ...

What could be causing the lack of data with 'react-hook-form'?

I have encountered an issue while working with react-native and using 'react-hook-forms' for creating dynamic forms. The problem is that the data object returned is empty, even though it should contain the values entered in the input fields. When ...

Encountering difficulties in the installation of a package within Next JS

Can anyone assist me with this issue I'm facing while trying to install styled-components on Next JS? I keep getting an error after entering npm install --save styled-components: npm ERR! Unexpected end of JSON input while parsing near '...ry.np ...

The animation for the CSS background image simply refuses to cooperate

My goal is to create a CSS background animation using the Body tag. Below is the code I am currently using: body { animation-name:mymove; animation-duration:5s; animation-direction:alternate; animation-iteration-count:infinite; -webkit-animation-name:mymo ...

Having trouble retrieving data from a JSON file using JQuery AJAX?

My JSON file structure is presented as follows: { head: { link: [], vars: [ "CompanyName", "Company_Name", "Foundation_URI", "Foundation_Name", "Latitude", "Longitude" ] }, results: { distinct: fal ...

The route parameters seem to be malfunctioning when using the Google Maps Directions API

Currently, I am attempting to transfer the latitude and longitude of a location from one HTML file to another using the $routeParams feature. In the second HTML file, I utilized the Google Maps directions API to display the directions from the source lati ...

Tips on accessing PDF files in a new window and downloading them within a blank pop-up screen

I am currently attempting to replicate a specific situation in order to debug an issue. In this scenario, I need to click on a date that will open a new pop-up window. However, the window is blank and a PDF file is downloaded within that window. Unfortunat ...

Retrieving information from a nested .then callback

Summing it up briefly, I've been diving into the depths of learning JavaScript for a while now. After hours and hours of relentless Googling, I find myself stuck with an issue that eludes resolution, pointing to my flawed approach. The objective at h ...

creating a loop to handle AJAX requests for JSON data

My JSON call successfully loads the data.root.offer[0].region data into a div with the class .region. Here is the code snippet: $.getJSON('json/data.json', function(data) { $('.region').html('<p>' + data.root.offer[0] ...

What is the best way to send an array element to a function?

In my PHP code, I am fetching data from a database and encoding it in JSON to be called by an AJAX request. while ($row = mysqli_fetch_assoc($empRecords)) { $data[] = array( "level"=>$whatTeam($row['level&a ...

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...

Tips for maintaining the data in localStorage when the app is rendering

I've encountered an issue with my localStorage implementation in my app. I've set it up to add +1 every time a user visits, but the value resets to 0 whenever the page is refreshed. This is the code snippet in question: localStorage.setItem(& ...

Completing the regex properly

When using my editor, I am able to paste a video URL which is then converted by regex into an embed code. The URL in the WYSIWYG-editor looks like this: Once converted, the output HTML appears as: <p>http://emedia.is.ed.ac.uk:8080/JW/wsconfig.xml& ...

Angular 4: Issue with Radiobutton values vanishing when another Radiobutton is selected

I have 3 radio buttons that are used to sort different data from an API. However, when I press one radio button, the value of the selected button disappears if another radio button is clicked. This issue can be seen in the screenshots here: https://i.sstat ...

Execute a PUT request within a Firebase Cloud Function database handler

I am working on syncing data between my server's database and Firebase realtime db. The first part, which involves syncing from my server to Firebase, is already complete. However, I am facing challenges with the second part - syncing data from Fireba ...

What is the best way to prevent excessive rerenders when verifying if database information has been successfully retrieved?

Hey there, I'm encountering an issue where the if statement check in my code is causing a "too many rerenders" problem. I'm trying to create a delay between pulling data from the database and calculating the BMI. Any suggestions on how to resolve ...

I'm puzzled as to why a div tag suddenly becomes invisible when I attempt to link it with a v-for directive in my code

I am facing an issue with the div tag assigned to the log class. My objective is to populate the text using data retrieved from the API response. However, when I attempt to include the v-for directive, the entire div mysteriously disappears from the brow ...