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

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

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
Tony 14 Апр 2020 в 19:10

1 ответ

Лучший ответ

При первом вызове 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>
3
Anurag Srivastava 14 Апр 2020 в 16:15