0

I have a simple task to create a counter so that I can subtract and add a number by pressing, but it gives an error in the console.

This is an error.

index.html:21 Uncaught TypeError: Cannot set properties of null (setting 'onclick')
    at index.html:21:42
(anonymous) @ index.html:21

This is a code.

<!DOCTYPE html>
<html>
  <head>
    <title>Counter</title>

  </head>
  <style>

    p{
      font-size: 2rem;

    }
    button{
      font-size: 2rem;
    }
  </style>

  <script>
let integer = 0;

document.getElementById('minus').onclick = function(){
  integer-=1;
  document.getElementsByClassName('number').innerHTML = integer;

};
document.getElementById('plus').onclick = function(){

  integer+=1;
  document.getElementsByClassName('number').innerHTML = integer;
};
  </script>
  <body>
    <p class="number">0</p>
    <button id="minus">-</button>
    <button id="plus">+</button>
  </body>
</html>

I tried many ways but nothing helps.

Martin21
  • 15
  • 3
  • 3
    Move `` to the `

    `

     – NNL993 Dec 30 '22 at 13:43
  • 1
    @NNL993 it is one possible solution not necessarily the best (slower because it not async anymore) – tacoshy Dec 30 '22 at 13:44
  • @tacoshy it is never correct to include a `script` (or anything else) that is in neither the `head` nor the `body`. – Robin Zigmond Dec 30 '22 at 13:47
  • `Uncaught TypeError: Element is null` means that the script can not find that element because it either does not exist or it does not know the element yet because the script is executed before the element was read (synchronous loading). To fix that you can either move the script to the end of the body so it is only loaded and executed after the content. Alternativly you can add the `defer` attribute to the script tag to load it async but defer the execution of the script after the content is loaded. Last but not least the `onload` or `DOMContentLoaded` event. – tacoshy Dec 30 '22 at 13:47
  • 1
    https://validator.w3.org/nu/#textarea **Error**: `style` element between `head` and `body`. And after moved `style` into `head`... **Error**: `script` element between `head` and `body`. So, `style` should be inside `head` and `script` should be inside `head` OR `body`, otherwise it is invalid. – vee Dec 30 '22 at 13:48
  • @RobinZigmond I know, still IMHO the "worst" place to move your script to. Every other method is faster and later on "easier" to fix. – tacoshy Dec 30 '22 at 13:51

1 Answers1

-2

just add the script at the end I made some changes

<!DOCTYPE html>
<html>

<head>
  <title>Counter</title>

</head>
<style>
  p {
    font-size: 2rem;

  }

  button {
    font-size: 2rem;
  }
</style>


<body>
  <p class="number">0</p>
  <button id="minus">-</button>
  <button id="plus">+</button>


  <script>
    let integer = 0;
    const minusBtn = document.getElementById('minus');
    const plusBtn = document.getElementById('plus');
    const numP = document.querySelector('.number');

    minusBtn.onclick = function () {
      integer -= 1;
      numP.innerHTML = integer;

    };
    plusBtn.onclick = function () {
      console.log(integer)

      integer += 1;
      console.log(numP)
      numP.innerHTML = integer;
    };
  </script>

</body>

</html>
Vasim Hayat
  • 909
  • 11
  • 16