Отображение конкретных div в зависимости от того, какая радио-кнопка отмечена в JavaScript HTML & CSS - PullRequest
Новая
       0

Отображение конкретных div в зависимости от того, какая радио-кнопка отмечена в JavaScript HTML & CSS

0 голосов
/ 25 июня 2018

У меня проблемы с настройкой переключателей для представления пользователю различных Div в зависимости от того, какой переключатель выбран. По умолчанию переключатель «Прямоугольник» отмечен, поэтому элемент «Прямоугольный контейнер» должен быть видимым. Однако если пользователь выбирает радиокнопку «Овальный», тогда прямоугольник-контейнер должен быть скрыт, а элемент «Овальный контейнер» должен отображаться соответствующим образом. 

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>

Кто-нибудь может порекомендовать исправление, чтобы это заработало? Буду очень признателен!

Ответы [ 4 ]

0 голосов
/ 25 июня 2018

Измените свой HTML-код и код JavaScript, как показано ниже.

1.) HTML-код 

<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-код 

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";
}
0 голосов
/ 25 июня 2018

Вот более короткий код, используя onchange="change('');"

Ваш код не работает, потому что вы забыли [0] здесь 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>
0 голосов
/ 25 июня 2018

Вышеупомянутое решение с полным CSS также прекрасно, но если вы хотите продолжать использовать JavaScript,

1. Измените document.onload radioButtonSuperFunction() { на window.onload = function() {, чтобы узнать, почему, пожалуйста, обратитесь к этой ссылке

2. Когда вы используете document.getElementsByClassName, он возвращает массив элементов, поэтому вам нужно выбрать конкретный элемент из этого массива, вы не можете использовать его как var ex1 = document.getElementsByClassName('RectangleCheck');, потому что он не возвращает определенный элемент но массив элементов.

Чтобы решить эту проблему, используйте var ex1 = document.getElementsByClassName('RectangleCheck')[0];, чтобы выбрать только первый соответствующий элемент (это грязное решение, если у вас много элементов с одинаковым именем класса), или используйте document.getElementById, чтобы нацелить элемент по его идентификатору.

0 голосов
/ 25 июня 2018

JS не нужен, просто используйте CSS, чтобы показать div рядом с отмеченным переключателем.

Измените ваш HTML, как показано ниже, и добавьте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...