Why is addEventListener Not Working for My Submit Button?

Question

I'm in the beginning stages of a project and I am having some confusion as to why my addEventListener does not work. Using onClick with the submit button does work and will give me output in the console. However, when I try to make it work with addEventListener it does not work.

I have looked at multiple different examples and am not sure if there is an error in my HTML or my 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>

Thanks for your time and taking a look. I know once I figure this out, then I will be able to complete the rest of this.

Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, May 06 '18 at 21:52

score 2 · Answer 1 · answered May 06 '18 at 21:49

2

The page hasn't loaded yet, so the DOM doesn't show an entry for your element when you look for it. Just wait for the page to load.

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

answered May 06 '18 at 21:49

Travis J

77,009
39
185
250

score 1 · Accepted Answer · answered May 06 '18 at 22:00

Another option can be to put your JS tag at the bottom of your page

<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>

Reborn · Answer 3 · 2018-05-07T02:23:02.147

Apart from the problem that your html isn't loaded when your script is called, I would prefer listening to the submit event of the form rather than binding click event to the submit button, so that you can perform the custom validations and then decide if you want to submit the form or not using 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>

score 0 · Answer 4 · answered May 06 '18 at 22:00

Hi the problem is that the Javascript is loading before the DOM of the page has loaded... If you wrap in a window.onload it should make sure that it waits for the DOM to have fully loaded first before attempting to query the DOM.

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

Why is addEventListener Not Working for My Submit Button?

4 Answers4