Home/ Questions/Q 8782561
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T20:35:41+00:00

I assembled some code that checks the state of a checkbox and then displays

  • 0

I assembled some code that checks the state of a checkbox and then displays the corresponding message as a string. The default state of the checkbox is “unchecked”, but when I reload the page there’s no message displaying “Unchecked”, it will work as intended once I check the checkbox and uncheck. I want the state to display on page load in a nutshell, not on-change. Here’s the code:

<html>
<head>
</head>
<body>

<input type="checkbox" id="checkBox" />
<div id="text"></div>

<script type="text/javascript">
var getId = document.getElementById('text'),
    checkbox = document.getElementById('checkBox');

function checkState(){
    text.innerHTML = checkbox.checked ? "Checkbox is checked" : "Checkbox is empty";
}
checkbox.onchange = checkState;
</script>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just need to call your own function in addiction to set it as the checkbox onchange event.

    Since you’re executing the script on the end of the body, it only gets executed when you already have access to the DOM, you just need to call checkState() after it’s definition.

    <html>
<head>
</head>
<body>

<input type="checkbox" id="checkBox" />
<div id="text"></div>

<script type="text/javascript">
var getId = document.getElementById('text'),
    checkbox = document.getElementById('checkBox');

function checkState(){
    text.innerHTML = checkbox.checked ? "Checkbox is checked" : "Checkbox is empty";
}
checkbox.onchange = checkState;
checkState();
</script>

</body>
</html>
    • 0