根据您选择的Radio Button显示和隐藏输入字段

Question

我不能使它工作。我希望用户在两个选项(单选按钮)之间进行选择。第一个选项应该只显示一个带有标签Text "Höhe"的输入字段。第二个选项应该将第一个输入的标签Text更改为"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

您需要一个事件侦听器，因为该函数不只是通过声明调用。你可以使用inline:

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

Answer 2

只需添加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>