Showing specific divs depending on which radio button is checked in JavaScript HTML & CSS

Question

I am having trouble getting my radio buttons to present different Divs to the user depending on which radio button is selected. By default the radio button "Rectangle" is checked so the Rectangle-container Div should by visible. However, if the user selects the "Oval" radio button then the Rectangle-container should be hidden, and the Oval-container Div should be displayed accordingly.

document.onload radioButtonSuperFunction() {
  var PoolShape = "";
  var ex1 = document.getElementsByClassName('RectangleCheck');
  var ex2 = document.getElementsByClassName('OvalCheck');
  var ex3 = document.getElementsByClassName('RoundCheck');
  var ex4 = document.getElementsByClassName('OblongCheck');

  ex1.onclick = radioFunction1;
  ex2.onclick = radioFunction2;
  ex3.onclick = radioFunction3;
  ex4.onclick = radioFunction4;
}

function radioFunction1() {
  document.getElementsByClassName('Rectangle-container').style.display = 'block';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Rectangle";
}

function radioFunction2() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'block';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Oval";
}

function radioFunction3() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'block';
  document.getElementsByClassName('Oblong-container').style.display = 'none';
  PoolShape == "Round";
}

function radioFunction4() {
  document.getElementsByClassName('Rectangle-container').style.display = 'none';
  document.getElementsByClassName('Oval-container').style.display = 'none';
  document.getElementsByClassName('Round-container').style.display = 'none';
  document.getElementsByClassName('Oblong-container').style.display = 'block';
  PoolShape == "Oblong";
}

.Oval-container,
.Round-container,
.Oblong-container {
  display:none;
}

<span>
  What is the shape of your pool:
  <label class="radio-container">
    <input type="radio" name="radio" class="RectangleCheck" checked="checked">
    <span class="radio-checkmark"></span>Rectangle
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="OvalCheck">
    <span class="radio-checkmark"></span>Oval
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="RoundCheck">
    <span class="radio-checkmark"></span>Round
  </label>
  
  <label class="radio-container">
    <input type="radio" name="radio" class="OblongCheck">
    <span class="radio-checkmark"></span>Custom Oblong</label>
</span>



<div class="Rectangle-container">
  Length of your pool in feet
  <input type="number" class="tabinput Length" min="1">

  Width of your pool in feet
  <input type="number" class="tabinput Width" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput Depth" min="1">
</div>

<div class="Oval-container">
  Half the length of your pool in feet
  <input type="number" class="tabinput HalfLength" min="1">

  Half the width of your pool in feet
  <input type="number" class="tabinput HalfWidth" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput OvalDepth" min="1">
</div>

<div class="Round-container">
  Radius of your pool in feet
  <input type="number" class="tabinput RoundRadius" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput RoundDepth" min="1">
</div>

<div class="Oblong-container">
  Small diameter of your pool in feet
  <input type="number" class="tabinput SmallDiameter" min="1">

  Large diameter of your pool in feet
  <input type="number" class="tabinput LargeDiameter" min="1">

  Length of your pool in feet
  <input type="number" class="tabinput OblongLength" min="1">
</div>

Can anyone recommend a fix to get this working? Would be greatly appreciated!

Answer 1

Change your html code and javascript code like below.

1.)html code

<span>
  What is the shape of your pool:
  <label class="radio-container">
    <input type="radio" name="radio" class="RectangleCheck" checked="checked" onclick="javascript:radioFunction1();">
    <span class="radio-checkmark"></span>Rectangle
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="OvalCheck" onclick="javascript:radioFunction2();">
    <span class="radio-checkmark"></span>Oval
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="RoundCheck" onclick="javascript:radioFunction3();">
    <span class="radio-checkmark"></span>Round
  </label>

  <label class="radio-container">
    <input type="radio" name="radio" class="OblongCheck" onclick="javascript:radioFunction4();">
    <span class="radio-checkmark"></span>Custom Oblong</label>
</span>

<div id="Rectangle-container">
  Length of your pool in feet
  <input type="number" class="tabinput Length" min="1">

  Width of your pool in feet
  <input type="number" class="tabinput Width" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput Depth" min="1">
</div>

<div id="Oval-container" style="display:none">
  Half the length of your pool in feet
  <input type="number" class="tabinput HalfLength" min="1">

  Half the width of your pool in feet
  <input type="number" class="tabinput HalfWidth" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput OvalDepth" min="1">
</div>

<div id="Round-container" style="display:none">
  Radius of your pool in feet
  <input type="number" class="tabinput RoundRadius" min="1">

  Depth of your pool in feet
  <input type="number" class="tabinput RoundDepth" min="1">
</div>

<div id="Oblong-container" style="display:none">
  Small diameter of your pool in feet
  <input type="number" class="tabinput SmallDiameter" min="1">

  Large diameter of your pool in feet
  <input type="number" class="tabinput LargeDiameter" min="1">

  Length of your pool in feet
  <input type="number" class="tabinput OblongLength" min="1">
</div>

2.)javascript code

var PoolShape = "";

function radioFunction1() {

  document.getElementById('Rectangle-container').style.display = 'block';
  document.getElementById('Oval-container').style.display = 'none';
  document.getElementById('Round-container').style.display = 'none';
  document.getElementById('Oblong-container').style.display = 'none';
  PoolShape == "Rectangle";
}

function radioFunction2() {
  document.getElementById('Rectangle-container').style.display = 'none';
  document.getElementById('Oval-container').style.display = 'block';
  document.getElementById('Round-container').style.display = 'none';
  document.getElementById('Oblong-container').style.display = 'none';
  PoolShape == "Oval";
}

function radioFunction3() {
  document.getElementById('Rectangle-container').style.display = 'none';
  document.getElementById('Oval-container').style.display = 'none';
  document.getElementById('Round-container').style.display = 'block';
  document.getElementById('Oblong-container').style.display = 'none';
  PoolShape == "Round";
}

function radioFunction4() {
  document.getElementById('Rectangle-container').style.display = 'none';
  document.getElementById('Oval-container').style.display = 'none';
  document.getElementById('Round-container').style.display = 'none';
  document.getElementById('Oblong-container').style.display = 'block';
  PoolShape == "Oblong";
}

Answer 2

The above solution with complete css is also great but if you want to keep using JavaScript then,

1. Change document.onload radioButtonSuperFunction() { to window.onload = function() {, to know why please refer to this link

2. When you use document.getElementsByClassName it returns an array of elements so you have to select the specific element from that array, you cannot use it like var ex1 = document.getElementsByClassName('RectangleCheck'); because its not returning a specific element but an array of elements.

To solve this, use var ex1 = document.getElementsByClassName('RectangleCheck')[0]; to select just the first matched element (this is a messy solution if you have many elements with same class name) or use document.getElementById to target element by its ID.

Answer 3

Here is shorter code using onchange="change('');"

Your code does not work because you forgot [0] here document.getElementsByClassName('..')[0]

function change(name){
 document.getElementsByClassName('Rectangle-container')[0].style.display = 'none';
  document.getElementsByClassName('Oval-container')[0].style.display = 'none';
  document.getElementsByClassName('Round-container')[0].style.display = 'none';
  document.getElementsByClassName('Oblong-container')[0].style.display = 'none';
document.getElementsByClassName(name)[0].style.display="block";

}

.Oval-container,
.Round-container,
.Oblong-container {
  display:none;
}

<span>
What is the shape of your pool:
<label class="radio-container">
   <input onchange="change('Rectangle-container');" type="radio" name="radio" class="RectangleCheck" checked="checked">
   <span class="radio-checkmark"></span>Rectangle
</label>
<label class="radio-container">
  <input onchange="change('Oval-container');" type="radio" name="radio" class="OvalCheck"><span class="radio-checkmark"></span>Oval
  </label>
<label class="radio-container">
  <input onchange="change('Round-container');" type="radio" name="radio" class="RoundCheck"><span class="radio-checkmark"></span>Round
  </label>
<label class="radio-container">
<input onchange="change('Oblong-container');" type="radio" name="radio" class="OblongCheck"><span class="radio-checkmark"></span>Custom Oblong
</label>
</span>



<div class="Rectangle-container">
Length of your pool in feet
<input type="number" class="tabinput Length" min="1">

Width of your pool in feet
<input type="number" class="tabinput Width" min="1">

Depth of your pool in feet
<input type="number" class="tabinput Depth" min="1">
</div>

<div class="Oval-container">
Half the length of your pool in feet
<input type="number" class="tabinput HalfLength" min="1">

Half the width of your pool in feet
<input type="number" class="tabinput HalfWidth" min="1">

Depth of your pool in feet
<input type="number" class="tabinput OvalDepth" min="1">
</div>

<div class="Round-container">
Radius of your pool in feet
<input type="number" class="tabinput RoundRadius" min="1">

Depth of your pool in feet
<input type="number" class="tabinput RoundDepth" min="1">
</div>

<div class="Oblong-container">
Small diameter of your pool in feet
<input type="number" class="tabinput SmallDiameter" min="1">

Large diameter of your pool in feet
<input type="number" class="tabinput LargeDiameter" min="1">

Length of your pool in feet
<input type="number" class="tabinput OblongLength" min="1">
</div>

Answer 4

No need of JS, just use CSS to show the div next to the checked radio button.

Change your HTML like shown below and add the CSS.

[type="radio"]:not(:checked)+span+div {
  display: none;
}

[type="radio"]:not(:checked)+span+div {
  display: none;
}

label.radio-container {
  display: block;
}

<span>
What is the shape of your pool:

<label class="radio-container">
<input type="radio" name="radio" class="RectangleCheck" checked="checked">
<span class="radio-checkmark"></span>Rectangle
<div class="Rectangle-container">
  Length of your pool in feet
  <input type="number" class="tabinput Length" min="1"> Width of your pool in feet
  <input type="number" class="tabinput Width" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput Depth" min="1">
</div>
</label>



<label class="radio-container">
<input type="radio" name="radio" class="OvalCheck"><span class="radio-checkmark"></span>Oval
<div class="Oval-container">
  Half the length of your pool in feet
  <input type="number" class="tabinput HalfLength" min="1"> Half the width of your pool in feet
  <input type="number" class="tabinput HalfWidth" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput OvalDepth" min="1">
</div>
</label>




<label class="radio-container">
  <input type="radio" name="radio" class="RoundCheck">
  <span class="radio-checkmark"></span>Round
  <div class="Round-container">
  Radius of your pool in feet
  <input type="number" class="tabinput RoundRadius" min="1"> Depth of your pool in feet
  <input type="number" class="tabinput RoundDepth" min="1">
</div>
</label>



<label class="radio-container">
  <input type="radio" name="radio" class="OblongCheck">
  <span class="radio-checkmark"></span>Custom Oblong
  
  <div class="Oblong-container">
  Small diameter of your pool in feet
  <input type="number" class="tabinput SmallDiameter" min="1"> Large diameter of your pool in feet
  <input type="number" class="tabinput LargeDiameter" min="1"> Length of your pool in feet
  <input type="number" class="tabinput OblongLength" min="1">
  </div>
 </label>

</span>