为什么 addEventListener 对我的提交按钮不起作用？

Question

我正处于项目的开始阶段，我对为什么我的 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>

感谢您抽空浏览。我知道一旦我想通了，我就能完成剩下的。

Answer 1

该页面尚未加载，因此 DOM 在您查找元素时未显示该元素的条目。只需等待页面加载。

window.onload = function(){
    document.getElementById('submitbtn').addEventListener("click", payment);
};

Answer 2

您好，问题是 Javascript 在页面的 DOM 加载之前加载...如果您包装在 window.onload 中，它应该确保它等待让 DOM 在尝试查询 DOM.

之前先完全加载

window.onload = () => {
document.getElementById('submitbtn').addEventListener("click", payment);
}

Answer 3

另一种选择是将 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>

Answer 4

除了调用脚本时未加载 html 的问题外，我更愿意收听表单的 submit 事件，而不是将点击事件绑定到提交按钮，以便您可以执行自定义验证，然后决定是否要使用 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>

为什么 addEventListener 对我的提交按钮不起作用？

Why is addEventListener Not Working for My Submit Button?

html

javascript

submit

addeventlistener