Fatal编程技术网
  • javascript/
  • Javascript 为什么addEventListener不适用于我的提交按钮？

Javascript 为什么addEventListener不适用于我的提交按钮？

javascript html

Javascript 为什么addEventListener不适用于我的提交按钮？,javascript,html,submit,addeventlistener,Javascript,Html,Submit,Addeventlistener,我在一个项目的开始阶段，我有一些困惑，为什么我的addEventListener不工作。使用onClick和submit按钮确实有效，并将在控制台中提供输出。但是，当我尝试使用addEventListener使其工作时，它不起作用 我看过多个不同的例子，不确定我的HTML或Javascript中是否有错误 <html> <head> <title>Loan Payment Estimator</title> <style&

我在一个项目的开始阶段，我有一些困惑，为什么我的addEventListener不工作。使用onClick和submit按钮确实有效，并将在控制台中提供输出。但是，当我尝试使用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>


贷款支付估计器
身体{
背景色：#081822；
}
形式{
宽度：470px；边距：0px自动；
边框：15px实心#eef5ee；背景色：#c1cc9c；字体粗体；边框折叠：折叠；填充：10px；页边距底部：0px；
}
表格h2{边距：0；颜色：#244769；文本对齐：中心；
}
输入{
边距：2倍；宽度：173倍；
}
标签{
显示：内联块；
宽度：300px；
右边距：-180px；
文本对齐：左对齐；
}
.按钮提交{
宽度：177px；
左边距：124px；
}
document.getElementById（'submitbtn'）。addEventListener（“单击”，付款）
功能支付（）{
principle=document.getElementById（'principle'）。值；
日期=document.getElementById（'date'）。值；
长度=document.getElementById（'loanLength'）。值；
控制台日志（原理）；
控制台日志（日期）；
控制台日志（长度）；
}
函数calcpr（）{
aprValue=document.getElementById（'loanLength'）。值；
console.log（apr值）；
}
贷款支付估计器
原则：


贷款日期：


贷款期限：
12个月
24个月
36个月
48个月
60个月
72个月
84个月


还款日期：




利息：


支付总额：
谢谢你抽出时间来看看。我知道，一旦我弄明白了这一点，我就可以完成剩下的工作。

页面还没有加载，因此在查找元素时，DOM不会显示该元素的条目。只需等待页面加载即可

window.onload = function(){
    document.getElementById('submitbtn').addEventListener("click", payment);
};
该页面尚未加载，因此在查找元素时DOM不会显示该元素的条目。只需等待页面加载即可

window.onload = function(){
    document.getElementById('submitbtn').addEventListener("click", payment);
};
嗨，问题是Javascript在页面的DOM加载之前加载。。。如果包装在window.onload中，则应确保在尝试查询DOM之前，先等待DOM完全加载

window.onload = () => {
document.getElementById('submitbtn').addEventListener("click", payment);
}
嗨，问题是Javascript在页面的DOM加载之前加载。。。如果包装在window.onload中，则应确保在尝试查询DOM之前，先等待DOM完全加载

window.onload = () => {
document.getElementById('submitbtn').addEventListener("click", payment);
}
另一个选择是将JS标记放在页面底部


贷款支付估计器
身体{
背景色：#081822；
}
形式{
宽度：470px；边距：0px自动；
边框：15px实心#eef5ee；背景色：#c1cc9c；字体粗体；边框折叠：折叠；填充：10px；页边距底部：0px；
}
表格h2{边距：0；颜色：#244769；文本对齐：中心；
}
输入{
边距：2倍；宽度：173倍；
}
标签{
显示：内联块；
宽度：300px；
右边距：-180px；
文本对齐：左对齐；
}
.按钮提交{
宽度：177px；
左边距：124px；
}
贷款支付估计器
原则：


贷款日期：


贷款期限：
12个月
24个月
36个月
48个月
60个月
72个月
84个月


还款日期：




利息：


支付总额：


document.getElementById（'submitbtn'）。addEventListener（“单击”，付款）
功能支付（）{
principle=document.getElementById（'principle'）。值；
日期=document.getElementById（'date'）。值；
长度=document.getElementById（'loanLength'）。值；
控制台日志（原理）；
控制台日志（日期）；
控制台日志（长度）；
}
函数calcpr（）{
aprValue=document.getElementById（'loanLength'）。值；
console.log（apr值）；
}
另一个选择是将JS标签放在页面底部


贷款支付估计器
身体{
背景色：#081822；
}
形式{
宽度：470px；边距：0px自动；
边框：15px实心#eef5ee；背景色：#c1cc9c；字体粗体；边框折叠：折叠；填充：10px；页边距底部：0px；
}
表格h2{边距：0；颜色：#244769；文本对齐：中心；
}
输入{
边距：2倍；宽度：173倍；
}
标签{
显示：内联块；
宽度：300px；
右边距：-180px；
文本对齐：左对齐；
}
.按钮提交{
宽度：177px；
左边距：124px；
}
贷款支付估计器
原则：


贷款日期：


贷款期限：
12个月
24个月
36个月
48个月
60个月
72个月
84个月


还款日期：