如何使用此 Javascript 解决方案在网络表单上的 div 之间正确切换？

Question

我正在尝试在两个 div 之间切换显示。第一个包含现有销售代表的下拉菜单。第二个包含用于添加新销售代表的文本输入字段。我想防止用户同时看到两个 div。我不希望 div 在首次加载页面时显示。

正常工作：

一开始 div 都不显示。
此外，当我点击"Choose"旁边的单选按钮时，会显示ID="repIfChoose"的div。

工作不正常：

当我点击"Add"旁边的单选按钮时，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>

Answer 1

您的拼写错误...请改正，如果这就是您要查找的内容，请告诉我。

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

Answer 2

为达到预期结果，请进行以下更改以修复语法和拼写错误

document.getElementById 已用于错误的大小写，如 getElementByID
id 名称应该使用相同的名称，因为它区分大小写 - 应该是 repIfAdd 而不是 repifAdd

        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';
            }   
        }

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



</body>

代码示例 - https://codepen.io/nagasai/pen/MGbPpv

Answer 3

你的 getElementById() 有几个大写的 D；此外，您的 ID 名称也存在大小写问题。否则有效：

https://jsfiddle.net/4qswkyLp/

确保在浏览器中使用开发者控制台来调试代码，对于大多数浏览器来说，在 PC 上使用 F12 很容易。

如何使用此 Javascript 解决方案在网络表单上的 div 之间正确切换？

How do I properly toggle between divs on a web form using this Javascript solution?

javascript

css

function

display