根据您选择的单选按钮显示和隐藏输入字段 select

Question

我无法让它工作。我希望用户在两个选项（单选按钮）之间进行选择。第一个选项应该只显示一个带有“Höhe”标签文本的输入字段。第二个选项应将第一个输入的标签文本更改为“Niedrigste Höhe in mm”并显示第二个输入字段。

也许有人可以抽出几分钟帮助我，谢谢。

这是我的代码，但它不起作用..

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>

Answer 1

只需添加 onclick 事件处理程序即可完成：

<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>

Answer 2

你需要一个事件侦听器，因为函数不是仅通过声明调用的。您可以内联执行此操作：

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

但这不是好的做法 – HTML、CSS 和 JavaScript 应该分开：

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

adjustableHeight.addEventListener('change', adjustableHeightCheck);

您还忘记在 else 语句中将 label 改回：

document.getElementById("height").innerHTML = "Höhe";

工作示例：（CSS 也分开 ;）

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>

根据您选择的单选按钮显示和隐藏输入字段 select

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

html

javascript

forms

input