Показать тайны в зависимости от выбранной опции выпадающего - PullRequest
Новая
       8

Показать тайны в зависимости от выбранной опции выпадающего

1 голос
/ 14 апреля 2020

Я собрал следующий код, который будет показывать <div> s, если в раскрывающемся списке выбрано «Переопределить». Проблема, с которой я столкнулся, состоит в том, чтобы выбрать «Переопределить», затем выбрать другую причину, а затем снова выбрать «Переопределить», чтобы она работала как задумано.

Моя цель - сделать ее невидимой при первом ее выделении.

HTML: 

<body>
  <div class="main">
    <div class="row">
            <!-- Begin left side data entry -->
      <form> <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
            <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
                <div class="row">
                    <div class="cell">1. Reason for Interuption </div>
                        <label>
                           <select class="cell" id="Q1" onChange="showQuest(this.value); store_value('Q1',this.value);">
                           <option value=""></option>
                            <option value="Call">Call</option>
                            <option value="Argument">Argument</option>
                            <option value="Sleep">Sleep</option>
                            <option value="Override">Override</option>
                           </select>
                        </label>

                </div>

                <div class="row" id="hidden8" style="display:none"> 
                    <div class="cell" id="Q8" >8. If Override, Override Approved by </div> 
                    <div class="cell"><input type="text" id="A8"   /></div>
                </div>

            </div>
        </form>
    </div>      
</div>
</body>

JavaScript Я собрал: 

//function to unhide questions if Override is selected
function showQuest(sel)
{
    if (sel == 'Override')
    {
        document.getElementById('Q1').addEventListener('change', function () {
            var style = this.value == 'Override' ? 'block' : 'none';
      document.getElementById('hidden8').style.display = style;
      document.getElementById('hidden9').style.display = style;
        });
    }
}

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

Любая помощь будет принята с благодарностью.

1 Ответ

3 голосов
/ 14 апреля 2020

При первом вызове showQuest вы просто добавляете прослушиватель событий, и он вызывается во второй раз. Возьмите addEventListener вне функции: 

//function to unhide questions if Override is selected
document.getElementById('Q1').addEventListener('change', function() {
  var style = this.value == 'Override' ? 'block' : 'none';
  document.getElementById('hidden8').style.display = style;
});
<div class="main">
  <div class="row">
    <!-- Begin left side data entry -->
    <form>
      <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
      <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 145px;">
        <div class="row">
          <div class="cell">1. Reason for Interuption </div>
          <select class="cell" id="Q1">
            <option value=""></option>
            <option value="Call">Call</option>
            <option value="Argument">Argument</option>
            <option value="Sleep">Sleep</option>
            <option value="Override">Override</option>
          </select>
        </div>

        <div class="row" id="hidden8" style="display:none">
          <div class="cell" id="Q8">8. If Override, Override Approved by </div>
          <div class="cell"><input type="text" id="A8" /></div>
        </div>

      </div>
    </form>
  </div>
</div>
...