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!

It is probably not your only issue, but a single `=` should be used when setting the value of `PoolShape` — joknawe, Jun 25 '18 at 10:10

score 4 · Answer 1 · answered Jun 25 '18 at 10:11

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>

answered Jun 25 '18 at 10:11

Nandita Sharma

13,287
2
22
35

Thanks for the reply! I would prefer to go with CSS. That being said, Your method works in JSFiddle, but I cannot get the same code to work on my site. I have tried many different solutions which are not having an effect. The link to the site where your code is active is: www.thailandpoolshop.com/calculator – Dayley Jun 27 '18 at 04:06
You need to keep the exact same html. The input, span and the div containg the options must be just like in the question. You have used br/ tags in between. Also your options div inst parallel to the input and span. Thats why it isnt working. – Nandita Sharma Jun 27 '18 at 04:13
html should be like this Rectangle
Length of your pool in feet
Width of your pool in feet
Depth of your pool in feet
– Nandita Sharma Jun 27 '18 at 04:13
Also you hould not use br/ tags to create space between elements. Use margin-bottom css instead – Nandita Sharma Jun 27 '18 at 04:16
See it started working for me when i removed the br tags and kept the div after the span https://ibb.co/cQmwS8 – Nandita Sharma Jun 27 '18 at 04:18
I have copied your code and it still doesn't work on the site. With and without br's. – Dayley Jun 27 '18 at 08:46
Here is the code now using your sample, on 1 line, and only using br's (breaks) where you have stated: https://jsfiddle.net/sf3gad86/4/ – Dayley Jun 27 '18 at 08:51
You are still not keeping 'shape-container' div just next to the span in the label . It must be the just next element after – Nandita Sharma Jun 27 '18 at 09:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173929/discussion-between-dayley-and-nandita-arora-sharma). – Dayley Jun 28 '18 at 02:10

score 1 · Accepted Answer · answered Jun 25 '18 at 10:16

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>

Works perfectly! - It is a shame I could not have done it with CSS, but for some reason like I explained to Nandita it was automatically re-ordering divs outside of my label tags despite me placing them inside labels in the code which I have never come across before. Still unsure why?! =/ — Dayley, Jun 29 '18 at 09:07

score 0 · Answer 3 · answered Jun 25 '18 at 10:33

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.

score 0 · Answer 4 · answered Jun 25 '18 at 11:15

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";
}

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

4 Answers4