Uncaught TypeError: Cannot Read Property 'checked' of null - html checkbox toggle

Question

I am getting an error when attempting to run a function once a checkbox is being checked. The above error appears consistently each time I am attempting to run it. Heres the code:

HTML:

<body>
    <header>
        <div class="header_container">
            <h1>Trivia Quiz</h1>
            <p>Welcome to the Trivia Quiz 2020!</p>
            <p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
            <div class="header_settings" id="header_settings">
                <input type="checkbox" id="checkbox" onclick="TimeToggle()">
                <label for="TimeToggle">Time Limit</label><br>
                <input type="text" id="Timer" name="Timer" placeholder="Seconds" id="header_input">
            </div>
            <button>Start</button>
        </div>
    </header>
</body>

And Javascript (stored externally, linked in the head of the HTML document.):

var header_input = document.getElementById("header_input");
var header_settings = document.getElementById("header_settings");
var checkbox = document.getElementById("checkbox");

function TimeToggle() {
    if (checkbox.checked) {
        header_settings.style.height = "3%";
        setTimeout(function () {
            header_input.style.display = "none";
        }, 500);
    } else {
        header_settings.style.height = "10%";
        setTimeout(function () {
            header_input.style.display = "block";
        }, 500);
    }
}

The code is intended to toggle the height of the div named "header_settings", and the display setting of the input named "header_input" depending on whether the checkbox is checked.

I would appreciate any pointers regarding how this is not working, I have tried a lot. Thanks :)

You can not have two id's in one input - Also use an onchange function instead of aan onclick. — Always Helping
– Always Helping, Commented Sep 12, 2020 at 3:50
I have since corrected both issues mentioned above, however I am still getting the same error: "Uncaught TypeError: Cannot read property 'checked' of null at TimeToggle (script.js:37) at HTMLInputElement.onchange (index.html:26)" — SphenX
– SphenX, Commented Sep 12, 2020 at 3:54
@SphenX have you tried the answer I posted below? Are you ensuring the document has loaded before you try getting those elements? — Zeke Willams
– Zeke Willams, Commented Sep 12, 2020 at 4:27

Always Helping · Accepted Answer · 2020-09-12 03:55:26Z

Is this what you are trying to do ? You can use an onchange function and pass this as an argument and check if in your toggle function if input is checked or unchecked.

Also, you have had two id selectors on your input which is not possible.

In addition, please ensure that your scripts.js is loading just added before the </body> end tag

Add this code as your HTML input

<input type="checkbox" id="checkbox" onchange="TimeToggle(this)">

Live Working Demo:

function TimeToggle(el) {
  var header_input = document.getElementById("header_input");
  var header_settings = document.getElementById("header_settings");
  var checkbox = document.getElementById("checkbox");
  if (el.checked) {
    header_settings.style.height = '50px';
    setTimeout(function() {
      header_input.style.display = "none";
    }, 500);
  } else {
    header_settings.style.height = '100px';
    setTimeout(function() {
      header_input.style.display = "block";
    }, 500);
  }
}

<body>
  <header>
    <div class="header_container">
      <h1>Trivia Quiz</h1>
      <p>Welcome to the Trivia Quiz 2020!</p>
      <p>The aim of the game is to get as many questions correct as possible!<br> The topics range from film to geography, so good luck!</p>
      <div class="header_settings" id="header_settings">
        <input type="checkbox" id="checkbox" onchange="TimeToggle(this)">
        <label for="TimeToggle">Time Limit</label><br>
        <input type="text" name="Timer" placeholder="Seconds" id="header_input">
      </div>
      <button>Start</button>
    </div>
  </header>
</body>

Zeke Willams · Accepted Answer · 2020-09-12 04:28:37Z

0

Your problem is a very common one. You are trying to get the html elements using document.get... before the DOM has loaded. You need to wrap those document fetches in the onload listener for the window:

let checkbox;
window.onload = function() {
  checkbox = document.getElementById();
};

function TimeToggle() {//...}

edited Sep 12, 2020 at 4:28

answered Sep 12, 2020 at 3:58

Zeke Willams

18011 bronze badges

Comments

Keshav Saraf · Accepted Answer · 2020-09-12 05:05:06Z

0

Place the external JS to at the end. Just before</body>. And your problem will be solved.

Somewhat like

<body>
<!--Your HTML content here-->
<script src = "External Js.js"></script>
</body>

answered Sep 12, 2020 at 5:05

Keshav Saraf

7491 gold badge7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot Read Property 'checked' of null - html checkbox toggle

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related