我试图在两个 div 之间切换显示。第一个包含现有销售代表的下拉菜单。第二个包含用于添加新销售代表的文本输入字段。我想阻止用户同时看到两个 div。我不希望在首次加载页面时显示任何一个 div。
正常工作:
一开始两个 div 都不显示。
此外，当我单击“选择”旁边的单选按钮时，会显示 ID="repIfChoose"的 div。
无法正常工作:
当我单击“添加”旁边的单选按钮时，ID="repIfAdd"的 div 不显示。
首次显示 ID="repIfChoose"的 div 后，当我在单选按钮之间切换时没有任何反应(意味着 repIfChoose div 未隐藏且 repIfAdd div 未显示。)
我知道在 JQuery 中可能有更简单的解决方案，但我更愿意用 vanilla Javascript 来完成。有人可以帮我解决上面的两个错误以及您可能注意到的任何其他错误吗？谢谢。
<!DOCTYPE html>
<html>
<head></head>
<body>
<!--Radio button to switch between choose and add sales representative (choose default)-->
Choose <input type="radio" onclick="repVisible();" id="chooseInput" name="repRadio">
<br><br> Add <input type="radio" onclick="repVisible();" id="addInput" name="repRadio">
<div class="form-group" id="repIfChoose" style="display:none">
<label>Choose Sales Representative</label>
<select name="SalesRep">
<option value="" disabled selected>Choose Sales Representative</option>
<option value="">Adam</option>
<option value="">Bill</option>
<option value="">Carl</option>
</select>
</div>
<div class="form-group" id="repIfAdd" style="display:none">
<label>Add Sales Representative</label>
<input type="text" placeholder="e.g. Alex Branson" name="SalesRep">
</div>
<script>
function repVisible() {
if (document.getElementById('chooseInput').checked) {
document.getElementById('repIfChoose').style.display = 'block';
document.getElementById('repifAdd').style.display = 'none';
}
if (document.getElementById('addInput').checked) {
document.getElementByID('repIfChoose').style.display = 'none';
document.getElementByID('repIfAdd').style.display = 'block';
}
}
</script>
</body>
</html>最佳答案
您的 getElementById() 有几个大写的 D；此外，您的 ID 名称也存在大小写问题。否则有效:
https://jsfiddle.net/4qswkyLp/
确保在浏览器中使用开发人员控制台来调试代码，对于大多数浏览器，在 PC 上使用 F12 很容易。
关于javascript - 如何使用此 Javascript 解决方案在 Web 表单上的 div 之间正确切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50069821/