Bdtjtk

I am building an inspection app to walk an inspector through a house with context-relevant questions based on answers. I am having inconsistent success with using checkboxes to show/hide div content.

I have simplified my problem down to a few very basic lines of code that I can't seem to troubleshoot.

<input type="checkbox" name="cbReplaceOrRepair_0" value="Replace" id="cbReplaceOrRepair_0" onclick="showReplaceRoof()">Replace

<div class="dvRoofReplace" id="dvReplaceRoof" style="display:none">"Replace" option is checked</div><br>

<input type="checkbox" name="cbReplaceOrRepair_1" value="Repair" id="cbReplaceOrRepair_1" onclick="showDvConfirmRepairability()">Repair

<div class="dvRoofRepair" id="dvConfirmRepairability" style="display:none">"Repair" option is checked</div>





<script type="text/javascript">

function showReplaceRoof() {

var dvReplaceRoof = document.getElementById("dvReplaceRoof");

dvReplaceRoof.style.display = cbReplaceOrRepair_0.checked ? "block" : "none";

}

function showDvConfirmRepairability() {

var dvRoofRepair = document.getElementById("dvRoofRepair");

dvRoofRepair.style.display = cbReplaceOrRepair_1.checked ? "block" : "none";

}  

</script> 

My example shows one checkbox that works to show/hide a div and another on that does not work. Can anyone tell me what I'm doing wrong?

Also, this is my first question on here after literally years of looking up questions so I'll apologize in advance in case I messed up any of the posting protocols.

https://codepen.io/stephenskrocki/pen/EGoYaB

You access the element incorrectly.

The id of the second hidden element is id="dvConfirmRepairability.

Use var dvRoofRepair = document.getElementById("dvConfirmRepairability");

Hope this helps!!

Since there is only one wanted option, instead of checkbox I would use radio buttons:

HTML Markup:

<style>label > span {display: none;} /* hide notes by default */</style>

<label for="replace">Replace

  <input type="radio" name="radio" id="replace" onchange="radio()" />

  <span class="note">"Replace" option is checked</span>

</label>

<label for="repair">Repair

  <input type="radio" name="radio" id="repair" onchange="radio()" />

  <span class="note">"Repair" option is checked</span>

</label>

javaScript:

<script>

function radio() {

  var myRadio = document.querySelectorAll('input[name="radio"]'); // get radio

  var myNotes = document.querySelectorAll('.note'); // get notes

  if (myRadio[0].checked === true) { // if the first radio checked

    myNotes[0].style.display = 'inline-block'; // show first note

    myNotes[1].style.display = 'none'; // hide the second

  }

  else { // if not do the apposite

    myNotes[0].style.display = 'none';

    myNotes[1].style.display = 'inline-block';

  }

}

</script>

Hope it help you!