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!