Как правильно переключаться между div в веб-форме, используя это решение Javascript?

Question

Как правильно переключаться между div в веб-форме, используя это решение Javascript?

1

Я пытаюсь переключить отображение между двумя div. Первый содержит раскрывающееся меню существующих торговых представителей. Второй содержит текстовое поле ввода, чтобы добавить нового торгового представителя. Я хочу, чтобы пользователь не сразу видел оба div. Я хочу, чтобы ни один div не отображался при первой загрузке страницы.

Работает правильно:

На дисплее сначала не отображается div.
Кроме того, div с ID = "repIfChoose" отображается, когда я нажимаю переключатель рядом с "Выбрать".

Не работает правильно:

Div с ID = "repIfAdd" не отображается, когда я нажимаю переключатель рядом с надписью "Добавить".
Как только div с ID = "repIfChoose" сначала отображается, ничего не происходит, когда я переключаюсь между переключателями после этого (это означает, что repIfChoose div не скрыт, а div repIfAdd не отображается).

Я знаю, что в JQuery могут быть более простые решения, но я предпочел бы сделать это в 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>

Ben Russell 27 апр. 2018, в 22:47

Источник

Теги:

javascript

css

function

display

3 ответа

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>

John Cullen 27 апр. 2018, в 18:18

0

Не могли бы вы указать в своем ответе опечатки, которые увидят будущие пользователи?
Steve Knau 27 апр. 2018, в 20:32
1

На самом деле я бы порекомендовал удалить вопрос ... Это такая распространенная ошибка, которая не очень помогает другим.
jscul 27 апр. 2018, в 20:34
2

@Ben Рассел, если вы проверите свой код с помощью инструментов разработчика вашего браузера, вы увидите полезные ошибки в консоли, которые довольно быстро указывают нам на то, что у вас есть опечатки типа .getElementByID вместо .getElementById .
Dan Oswalt 27 апр. 2018, в 20:35
0

Да ... zbnrg совершенно прав. Вы должны почти всегда иметь открытую консоль, когда вы отлаживаете.
jscul 27 апр. 2018, в 20:36
0

Спасибо, Джон Каллен и zbnrg. Я сделаю это в будущем. Извиняюсь за вопрос новичка.
Ben Russell 27 апр. 2018, в 20:39

Показать ещё 3 комментария

0

Чтобы достичь ожидаемого результата, сделайте следующие изменения, чтобы исправить синтаксис и ошибки опечатки

document.getElementById используется с неправильным случаем, например getElementBy 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

Naga Sai A 27 апр. 2018, в 19:25

Ещё вопросы

Не могли бы вы указать в своем ответе опечатки, которые увидят будущие пользователи?
На самом деле я бы порекомендовал удалить вопрос ... Это такая распространенная ошибка, которая не очень помогает другим.
@Ben Рассел, если вы проверите свой код с помощью инструментов разработчика вашего браузера, вы увидите полезные ошибки в консоли, которые довольно быстро указывают нам на то, что у вас есть опечатки типа .getElementByID вместо .getElementById .
Да ... zbnrg совершенно прав. Вы должны почти всегда иметь открытую консоль, когда вы отлаживаете.
Спасибо, Джон Каллен и zbnrg. Я сделаю это в будущем. Извиняюсь за вопрос новичка.

Hexchaimen · Accepted Answer · 2018-04-27T18-48-00.000Z

У вашего getElementById() было несколько капиталов D's; кроме того, у вас в именах идентификаторов были проблемы с случаем. В противном случае работает:

https://jsfiddle.net/4qswkyLp/

Обязательно используйте консоль разработчика в своем браузере для отладки кода, который легко можно использовать для использования F12 на ПК, для большинства браузеров.