Display a div using a radio buttons

Question

To reduce the number of lines of code I simplified my code to display three divs instead. What I want is to have a particular div displayed while hiding the other two divs depending on which radio button is checked.

I'm actually following these two links

Adding event listeners to multiple elements

How can I check whether a radio button is selected with JavaScript?

in the second link it was suggested to use

radios[i].type === 'radio' && radios[i].checked

for the test.

however I modified it to just

DisplayOption[i].checked

since its all I think i need. The error I'm receiving is

Uncaught TypeError: Cannot read property 'checked' of undefined

 const column = document.querySelector('.column'); const table = document.querySelector('.table'); const details = document.querySelector('.details'); onload = function() { const DisplayOption = document.getElementsByClassName("DisplayOption"); for (i = 0; i < DisplayOption.length; i++) { DisplayOption[i].addEventListener('click', function() { if (DisplayOption[i].checked) { if (displyOption[i].value === "column") { column.style.display = "grid"; table.style.display = "none"; table.details.style.display = "none"; } else if (displyOption[i].value === "table") { column.style.display = "none"; table.style.display = "block"; table.details.style.display = "none"; } else { column.style.display = "none"; table.style.display = "none"; table.details.style.display = "block"; } } }, false); } } 

 .column { display: grid; } .table { display: none; } .table.details { display: none; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="table details"> The third div is being displayed </div> 

Answer 1

Inside the eventListener , to refer to the element being clicked use this instead of DisplayOption[i] . Another bug was using table.details - it should be only details . See corrected demo below:

 const column = document.querySelector('.column'); const table = document.querySelector('.table'); const details = document.querySelector('.details'); onload = function() { const DisplayOption = document.getElementsByClassName("DisplayOption"); for (i = 0; i < DisplayOption.length; i++) { DisplayOption[i].addEventListener('click', function() { if (this.checked) { if (this.value === "column") { column.style.display = "grid"; table.style.display = "none"; details.style.display = "none"; } else if (this.value === "table") { column.style.display = "none"; table.style.display = "block"; details.style.display = "none"; } else { column.style.display = "none"; table.style.display = "none"; details.style.display = "block"; } } }, false); } } 

 .column { display: grid; } .table { display: none; } .table.details { display: none; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="table details"> The third div is being displayed </div> 

Answer 2

You could achieve the same using CSS ! No need of javascript !

You can make use of the sibling (~) selector in CSS and display the corresponding div

 div { display: none; } input[value="column"]:checked~.column, input[value="table"]:checked~.table, input[value="details"]:checked~.details { display: block; } 

 <input type="radio" name="DisplayOption" value="column" class="DisplayOption" checked> <input type="radio" name="DisplayOption" value="table" class="DisplayOption"> <input type="radio" name="DisplayOption" value="details" class="DisplayOption"> <div class="column"> The first div is being displayed </div> <div class="table"> The second div is being displayed</div> <div class="details"> The third div is being displayed </div> 

JSFiddle link