Show and hide input fields depending on which Radio Button you select-CodePudding

i can't get it to work. I want the User to choose between two options (radio buttons). The first option should only show one input field with the label Text of "Höhe". The second Option should change the label Text of the first input to "Niedrigste Höhe in mm" and show the second input field.

Maybe someone can spare a few minutes and help me, thanks.

Here is my Code, but it won't work..

function adjustableHeightCheck() {
  if (document.getElementById("adjustableHeight").checked) {
    document.getElementById("max-height").style.display = "block";
    document.getElementById("height").innerHTML = "Niedrigste Höhe in mm";
  } else {
    document.getElementById("max-height").style.display = "none";
  }
}

<label>Fix Höhe
  <input type="radio" name="verlegeart">
</label>

<label>Verstellbare Höhe
  <input type="radio" name="verlegeart" id="adjustableHeight">
</label>

<br>

<label>
  <p id="height">Höhe</p>
  <input type="number">
</label>

<div id="max-height" style="display: none">
  <label>
    <p>Höchste Höhe in mm</p>
    <input type="number">
  </label>
</div>

CodePudding user response：

Just add the onclick event handler to get thing done:

<label>Fix Höhe
  <input type="radio" name="verlegeart" onclick="adjustableHeightCheck()">
</label>

<label>Verstellbare Höhe
  <input type="radio" name="verlegeart" id="adjustableHeight"  onclick="adjustableHeightCheck()">
</label>

CodePudding user response：

You need an event listener for that because the function isn't called just by declaration. You could do that inline with:

<input type="radio" name="verlegeart" id="adjustableHeight"  onclick="adjustableHeightCheck()">

But this isn't good practice – HTML, CSS and JavaScript should be separate:

const adjustableHeight = document.querySelector('#adjustableHeight');

adjustableHeight.addEventListener('change', adjustableHeightCheck);

Working example: (CSS also separate ;)

const fixHeight = document.querySelector('#fixHeight');
const adjustableHeight = document.querySelector('#adjustableHeight');

fixHeight.addEventListener('change', adjustableHeightCheck);
adjustableHeight.addEventListener('change', adjustableHeightCheck);

function adjustableHeightCheck() {
  if (document.getElementById("adjustableHeight").checked) {
    document.getElementById("max-height").style.display = "block";
    document.getElementById("height").innerHTML = "Niedrigste Höhe in mm";
  } else {
    document.getElementById("max-height").style.display = "none";
    document.getElementById("height").innerHTML = "Höhe";
  }
}

#max-height {
  display: none;
}

<label>Fix Höhe
  <input type="radio" name="verlegeart" id="fixHeight">
</label>

<label>Verstellbare Höhe
  <input type="radio" name="verlegeart" id="adjustableHeight">
</label>

<br>

<label>
  <p id="height">Höhe</p>
  <input type="number">
</label>

<div id="max-height">
  <label>
    <p>Höchste Höhe in mm</p>
    <input type="number">
  </label>
</div>