Cannot Read the property of addEventListener of null

Question

I keep getting this error: Uncaught TypeError: Cannot read property 'addEventListener' of null. I looked at other posts that had similar issues but I guess my level of understanding for Javascript is not proficient enough to understand the proposed solutions given. Can someone help me?

Here is my Javascript code:

const multButton = document.getElementById('multiply');
const divideButton = document.getElementById('divide');
const firstNum = document.getElementById('firstNum')
const secondNum = document.getElementById('secondNum') 



function multiplyNum(first, second){
    const sum = first * second;
    return alert(sum);
}

function divideNum(first, second){
    const sum = first/second;
    return alert(sum);
}

multButton.addEventListener('click', multiplyNum)

divideButton.addEventListener('click', divideNum)

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    Calculator
    <div>
        <form action="get">
            1st Number: <input type="number" id="firstNum" name="firstNum"> <br>
            2nd Number: <input type="number" id="secondNum" name="secondNum"> <br>
            <button type="submit" id="multiply">Multiply</button>
            <button type="submit" id="divide">Divide</button>

        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

Does this answer your question? [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Heretic Monkey, Jun 08 '20 at 17:33

score 0 · Answer 1 · answered Jun 08 '20 at 17:45

What happens here is when you click on a button inside a form, it invokes the forms default submit method. I've moved the buttons outside the form tag so that it won't invoke the submit method. Thus we won't be redirected to another page on submission. Earlier we got redirected, that's why the dom elements where unavailable. The HTMl:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    Calculator
    <div>
      <form action="get">
        1st Number: <input type="number" id="firstNum" name="firstNum" /> <br />
        2nd Number: <input type="number" id="secondNum" name="secondNum" />
        <br />
      </form>
      <button id="multiply">Multiply</button>
      <button id="divide">Divide</button>
    </div>

    <script src="script.js"></script>
  </body>
</html>

The script

  const multButton = document.getElementById("multiply");
  const divideButton = document.getElementById("divide");
  const firstNum = document.getElementById("firstNum");
  const secondNum = document.getElementById("secondNum");

  function multiplyNum() {
    const sum = firstNum.value * secondNum.value;
    return alert(sum);
  }

  function divideNum() {
    const sum = firstNum.value / secondNum.value;
    return alert(sum);
  }

  multButton.addEventListener("click", multiplyNum);

  divideButton.addEventListener("click", divideNum);

score 0 · Answer 2 · answered Jun 08 '20 at 17:53

Either multButton is null because an element with the "id" "multiply" doesn't exist or divideButton is null because an element with the "id" "divide" doesn't exist (or both don't exist).

Your code that you posted is fine (although in your form tag it should be method='get' and not action='get').

The following is a modified version of your code that I ran:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    Calculator
    <div>
        <form method='get'>
            1st Number: <input type="number" id="firstNum" name="firstNum"> <br>
            2nd Number: <input type="number" id="secondNum" name="secondNum"> <br>
            <button type="submit" id="multiply">Multiply</button>
            <button type="submit" id="divide">Divide</button>

        </form>
    </div>

    <script>
    const multButton = document.getElementById('multiply');
    const divideButton = document.getElementById('divide');
    const firstNum = document.getElementById('firstNum')
    const secondNum = document.getElementById('secondNum') 

    multButton.addEventListener('click', function() {
        alert('Multiply');
    })

    divideButton.addEventListener('click', function() {
        alert('Divide');
    })
    </script>
</body>
</html>

Hi @Dave F Did it work like a calculator when you ran it? Because your functions don’t seem to indicate any math that would multiple or divide? I’m a beginner at all this so if I’ve misunderstood please let me know — Kazim Shabbir, Jun 09 '20 at 00:21
@KazimShabbir The code for multiplication and division that you had was fine. `alert('Multiply')` can be changed to `alert(firstNum.value * secondNum.value)` and `alert('Divide')` can be changed to `firstNum.value / secondNum.value`. I removed code that was necessary for the computations because minimizing code makes it easier to debug. This is because more code can introduce more bugs, which can cause additional problems and make it harder to debug. Sometimes I comment out unnecessary sections of code when debugging to ensure that they aren't part of the problem. — Dave F, Jun 12 '20 at 02:34

Cannot Read the property of addEventListener of null

2 Answers2