Javascript onchange event not working

Question

I did this code up trying to hide a select input field until the check box is checked. It works but when the page first loads these are all visible. I need them invisible until the check box is filled in. If I load the page then click the checkbox and then uncheck the check box the object disappears so I know it's working but why does it appear at the beginning and more importantly how do I stop it from doing that?

Code:

 function doruc() { var elem = document.getElementById("secondhalf1"), checkBox = document.getElementById("pizza11"); elem.style.display = checkBox.checked ? 'block' : 'none'; }; 

 <input type="checkbox" id="pizza22" onclick="doruc()" name="halfHalf2" /> 

Answer 1

You need to call the doruc function in global scope after document ready state and then calling that function will set the style to none .

<script>
    function doruc() {
        var elem = document.getElementById("secondhalf1"),
        checkBox = document.getElementById("pizza11");
        elem.style.display = checkBox.checked ? 'block' : 'none';
     };

   doruc();
</script>

Answer 2

I think it can solve your problem.

  if(pizza22) {
    secondhalf1.style.display="none";
  }
  pizza22.onchange = function() {
        if(secondhalf1.style.display==="none") {secondhalf1.style.display="";}
      else if(secondhalf1.style.display==="") {secondhalf1.style.display="none";secondhalf1};
  }

JsFiddle: https://jsfiddle.net/x22ugdmm/1/

Answer 3

Your name of ID in JavaScript is not matching to your element. In JavaScript there is pizza11 and in input tag there is pizza22. So look into that. 2 nd reason is you didn't call your function, you just defined it.

 function doruc() { var elem = document.getElementById("secondhalf1"), checkBox = document.getElementById("pizza11"); elem.style.display = checkBox.checked ? 'block' : 'none'; }; doruc(); 

 <input type="checkbox" id="pizza11" onclick="doruc()" name="halfHalf2" /> 

Try this it will work.