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>

score 2 · Accepted Answer · answered Mar 01 '19 at 05:51

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>

Thank you! I'm not too familiar with the this keyword.To be honest I try to avoid as much as possible :). I should really change that. — Personal Information, Mar 01 '19 at 06:01

score 2 · Answer 2 · answered Mar 01 '19 at 05:55

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

answered Mar 01 '19 at 05:55

Allan Jebaraj

1,062
8
25

This is really nice :) and simple. but the first div needs to be display grid not block. – Personal Information Mar 01 '19 at 05:59
1

You could declare the `input[value="column"]:checked~.column { display: grid }` separately :) – Allan Jebaraj Mar 01 '19 at 06:01
1

Even though I selected the first answer because It addresses the error in the question, I'm using your simple solution. Thanks mate! – Personal Information Mar 01 '19 at 06:14
1

Cheers ! Good luck ! – Allan Jebaraj Mar 01 '19 at 06:46

Display a div using a radio buttons

2 Answers2