我正处于项目的开始阶段,我对于为什么我的addEventListener不起作用感到困惑。使用带有提交按钮的onClick 可以工作,并会在控制台中输出。但是,当我尝试使用addEventListener时,它不起作用。
我查看了多个不同的示例,并且不确定我的HTML或Javascript中是否存在错误。
<html>
<head>
<title>Loan Payment Estimator</title>
<style>
body {
background-color: #081822;
}
form {
width: 470px; margin: 0px auto;
border:15px solid #eef5ee; background-color: #c1cc9c; font-weight: bold; border-collapse:collapse; padding: 10px; margin-bottom: 0px;
}
form h2 { margin: 0; color: #244769; text-align: center;
}
input {
margin:2px; width:173px;
}
label{
display:inline-block;
width:300px;
margin-right:-180px;
text-align:left;
}
.buttonSubmit {
width: 177px;
margin-left: 124px;
}
</style>
<script>
document.getElementById('submitbtn').addEventListener("click", payment)
function payment() {
principle = document.getElementById('principle').value;
date = document.getElementById('date').value;
length = document.getElementById('loanLength').value;
console.log(principle);
console.log(date);
console.log(length);
}
function calcAPR() {
aprValue = document.getElementById('loanLength').value;
console.log(aprValue);
}
</script>
</head>
<body>
<form>
<h2>Loan Payment Estimator</h2>
<label for="txtPrinciple">Principle:</label>
<input type='text' name='txtPrinciple' id='principle' required>
<br>
<label for="txtDate">Date of Loan:</label>
<input id="date" type="date" style="width:173px" required>
<br>
<label for="txtLength">Length of Loan:</label>
<select style="width:173px" id="loanLength">
<option value="12">12 Months</option>
<option value="24">24 Months</option>
<option value="36">36 Months</option>
<option value="48">48 Months</option>
<option value="60">60 Months</option>
<option value="72">72 Months</option>
<option value="84">84 Months</option>
</select>
<br>
<label for="txtRepayment">Repayment Date:</label>
<input type='text' name='txtRepayment' id="repayment">
<br>
<input type="submit" name="Submit" value="Submit" id="submitbtn" class="buttonSubmit" />
<hr width="100%">
<label for="txtApr">APR:</label>
<input type='text' name='txtApr'>
<br>
<label for="txtInterest">Interest:</label>
<input type='text' name='txtInterest'>
<br>
<label for="txtTotal">Total Paid:</label>
<input type='text' name='txtTotal'>
<hr width="100%">
<h2>Trending</h2>
<div class="row"></div>
<img id="honda" src="2017%20Civic%20Coupe.jpg" width="150" height="110">
<img id="audi" src="2018%20Audi%20A4.jpg" width="150" height="110">
<img id="chevy" src="2018%20Chevy%20Bolt.jpg" width="150" height="110">
<br>
<div class="column">
<img id="subaru" src="2018%20Subaru%20Impreza.jpg" width="150" height="110">
<img id="toyota" src="2018%20Toyota%20Corolla.jpg" width="150" height="110">
<img id="ford" src="2018%20ford%20f-150.jpeg" width="150" height="110">
</div>
</form>
</body>
</html>
感谢您的时间并看一看。我知道一旦我弄明白了,那么我将能够完成其余部分。
答案 0 :(得分:2)
页面尚未加载,因此DOM在您查找时不会显示元素的条目。只需等待页面加载。
window.onload = function(){
document.getElementById('submitbtn').addEventListener("click", payment);
};
答案 1 :(得分:1)
另一个选择是将您的JS标记放在页面底部
<html>
<head>
<title>Loan Payment Estimator</title>
<style>
body {
background-color: #081822;
}
form {
width: 470px; margin: 0px auto;
border:15px solid #eef5ee; background-color: #c1cc9c; font-weight: bold; border-collapse:collapse; padding: 10px; margin-bottom: 0px;
}
form h2 { margin: 0; color: #244769; text-align: center;
}
input {
margin:2px; width:173px;
}
label{
display:inline-block;
width:300px;
margin-right:-180px;
text-align:left;
}
.buttonSubmit {
width: 177px;
margin-left: 124px;
}
</style>
</head>
<body>
<form>
<h2>Loan Payment Estimator</h2>
<label for="txtPrinciple">Principle:</label>
<input type='text' name='txtPrinciple' id='principle' required>
<br>
<label for="txtDate">Date of Loan:</label>
<input id="date" type="date" style="width:173px" required>
<br>
<label for="txtLength">Length of Loan:</label>
<select style="width:173px" id="loanLength">
<option value="12">12 Months</option>
<option value="24">24 Months</option>
<option value="36">36 Months</option>
<option value="48">48 Months</option>
<option value="60">60 Months</option>
<option value="72">72 Months</option>
<option value="84">84 Months</option>
</select>
<br>
<label for="txtRepayment">Repayment Date:</label>
<input type='text' name='txtRepayment' id="repayment">
<br>
<input type="submit" name="Submit" value="Submit" id="submitbtn" class="buttonSubmit" />
<hr width="100%">
<label for="txtApr">APR:</label>
<input type='text' name='txtApr'>
<br>
<label for="txtInterest">Interest:</label>
<input type='text' name='txtInterest'>
<br>
<label for="txtTotal">Total Paid:</label>
<input type='text' name='txtTotal'>
<hr width="100%">
<h2>Trending</h2>
<div class="row"></div>
<img id="honda" src="2017%20Civic%20Coupe.jpg" width="150" height="110">
<img id="audi" src="2018%20Audi%20A4.jpg" width="150" height="110">
<img id="chevy" src="2018%20Chevy%20Bolt.jpg" width="150" height="110">
<br>
<div class="column">
<img id="subaru" src="2018%20Subaru%20Impreza.jpg" width="150" height="110">
<img id="toyota" src="2018%20Toyota%20Corolla.jpg" width="150" height="110">
<img id="ford" src="2018%20ford%20f-150.jpeg" width="150" height="110">
</div>
</form>
<script>
document.getElementById('submitbtn').addEventListener("click", payment)
function payment() {
principle = document.getElementById('principle').value;
date = document.getElementById('date').value;
length = document.getElementById('loanLength').value;
console.log(principle);
console.log(date);
console.log(length);
}
function calcAPR() {
aprValue = document.getElementById('loanLength').value;
console.log(aprValue);
}
</script>
</body>
</html>
答案 2 :(得分:1)
除了在调用脚本时未加载html的问题,我更愿意收听表单的submit
事件而不是将click事件绑定到提交按钮,以便您可以执行自定义验证,然后使用e.preventDefault()
document.querySelector('#my-form').addEventListener("submit", function(e) {
var isValid = payment();
console.log(validation);
if (isValid) {
e.preventDefault();
}
});
function payment() {
var principle = document.getElementById('principle').value;
var date = document.getElementById('date').value;
var length = document.getElementById('loanLength').value;
return (principle !== '' && date !== '' && length !== '');
}
function calcAPR() {
aprValue = document.getElementById('loanLength').value;
console.log(aprValue);
}
body {
background-color: #081822;
}
form {
width: 470px;
margin: 0px auto;
border: 15px solid #eef5ee;
background-color: #c1cc9c;
font-weight: bold;
border-collapse: collapse;
padding: 10px;
margin-bottom: 0px;
}
form h2 {
margin: 0;
color: #244769;
text-align: center;
}
input {
margin: 2px;
width: 173px;
}
label {
display: inline-block;
width: 300px;
margin-right: -180px;
text-align: left;
}
.buttonSubmit {
width: 177px;
margin-left: 124px;
}
<form id="my-form">
<h2>Loan Payment Estimator</h2>
<label for="txtPrinciple">Principle:</label>
<input type='text' name='txtPrinciple' id='principle' required>
<br>
<label for="txtDate">Date of Loan:</label>
<input id="date" type="date" style="width:173px" required>
<br>
<label for="txtLength">Length of Loan:</label>
<select style="width:173px" id="loanLength">
<option value="12">12 Months</option>
<option value="24">24 Months</option>
<option value="36">36 Months</option>
<option value="48">48 Months</option>
<option value="60">60 Months</option>
<option value="72">72 Months</option>
<option value="84">84 Months</option>
</select>
<br>
<label for="txtRepayment">Repayment Date:</label>
<input type='text' name='txtRepayment' id="repayment">
<br>
<input type="submit" name="Submit" value="Submit" id="submitbtn" class="buttonSubmit" />
<hr width="100%">
<label for="txtApr">APR:</label>
<input type='text' name='txtApr'>
<br>
<label for="txtInterest">Interest:</label>
<input type='text' name='txtInterest'>
<br>
<label for="txtTotal">Total Paid:</label>
<input type='text' name='txtTotal'>
<hr width="100%">
<h2>Trending</h2>
<div class="row"></div>
<img id="honda" src="2017%20Civic%20Coupe.jpg" width="150" height="110">
<img id="audi" src="2018%20Audi%20A4.jpg" width="150" height="110">
<img id="chevy" src="2018%20Chevy%20Bolt.jpg" width="150" height="110">
<br>
<div class="column">
<img id="subaru" src="2018%20Subaru%20Impreza.jpg" width="150" height="110">
<img id="toyota" src="2018%20Toyota%20Corolla.jpg" width="150" height="110">
<img id="ford" src="2018%20ford%20f-150.jpeg" width="150" height="110">
</div>
</form>
答案 3 :(得分:0)
嗨问题是在页面的DOM加载之前加载Javascript ...如果你在window.onload中包装它应该确保它在尝试查询之前等待DOM完全加载DOM。
window.onload = () => {
document.getElementById('submitbtn').addEventListener("click", payment);
}