這個問題在這里已經有了答案： 為什么 jQuery 或諸如 getElementById 之類的 DOM 方法找不到該元素？ (6 個回答) 4 小時前關閉。
我創建了一個表，它的顯示值最初在 css 中設定為 none。在我的 JavaScript 代碼中，我創建了一個應該顯示此表的函式。在此函式之后，我向按鈕添加了一個事件偵聽器，以在單擊時執行該函式。雖然，該表不顯示。
<!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>
任何幫助表示贊賞，謝謝！
uj5u.com熱心網友回復：
您必須修復引導程式的匯入。
我從引導程式檔案的入門開始更改鏈接。
對我來說，一切都很好：
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>uj5u.com熱心網友回復：
<!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>
uj5u.com熱心網友回復：
代碼沒問題。現在只有一件事讓我印象深刻。將您的 javascript 塊放在底部。就在結束體標簽之前。
并且您不必將兩個 EventListeners 應用到同一個 Button。你可以創建一個像 handleClickEvent() 這樣的新函式，在這個函式中你可以呼叫 loadTable 和 showTable 函式。
const btn = document.getElementById("okBtn");
btn.addEventListener("click",handleClickEvent);
function handleClickEvent() {
loadTable();
showTable();
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/323700.html
標籤：javascript html css