Как скрыть и показать div с помощью javascript после выбора параметров?

Итак, я пытался создать форму оценки стоимости своего проекта веб-сайта. Вся идея в том, что я подготовлю около 10 вопросов, и на сайте будет отображаться только следующий вопрос после того, как клиент ответит на первые предыдущие.

Он отлично работает до тех пор, пока опции не были предоставлены в select вместо radio. Он не покажет следующий вопрос, даже если клиент ответил на предыдущие.

Я не совсем уверен, что я сделал не так, и надеюсь, что взгляды сюда могут подсказать мне направление.

$(document).ready(function() {
  $("#problem").hide();
  $("#brand").hide();
  $("#ipmodel").hide();
  $("#stype").hide();
  $("#sgsmodel").hide();
  $("#sgnmodel").hide();
  $("#nmodel").hide();
  $("#smodel").hide();
  $("#turnon").hide();
  $("#liquiddamage").hide();
  $("#result").hide();
  var input = document.getElementById('phone');

  document.getElementById('phone_no').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });

  document.getElementById('phone_yes').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });

  document.getElementById('applephone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    showIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  document.getElementById('gss').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    showStype();
    showSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  
  document.getElementById('samsungphone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    showStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  
  document.getElementById('gns').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    showStype();
    hideSgsmodel();
    showSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  document.getElementById('nokiaphone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    showNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  document.getElementById('sonyphone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    showSmodel();
    hideTurnon();
    hideLiquiddamage();
  });
  
  document.getElementById('otherphone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype();
    hideSgsmodel();
    hideSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });

  function showProblem() {
    $("#problem").show();
  }

  function hideProblem() {
    $("#problem").hide();
  }

  function showBrand() {
    $("#brand").show();
  }

  function hideBrand() {
    $("#brand").hide();
  }

  function showIpmodel() {
    $("#ipmodel").show();
  }

  function hideIpmodel() {
    $("#ipmodel").hide();
  }

  function showStype() {
    $("#stype").show();
  }

  function hideStype() {
    $("#stype").hide();
  }

  function showSgsmodel() {
    $("#sgsmodel").show();
  }

  function hideSgsmodel() {
    $("#sgsmodel").hide();
  }
  
  function showSgnmodel() {
    $("#sgnmodel").show();
  }

  function hideSgnmodel() {
    $("#sgnmodel").hide();
  }

  function showNmodel() {
    $("#nmodel").show();
  }

  function hideNmodel() {
    $("#nmodel").hide();
  }

  function showSmodel() {
    $("#smodel").show();
  }

  function hideSmodel() {
    $("#smodel").hide();
  }

  function showTurnon() {
    $("#turnon").show();
  }

  function hideTurnon() {
    $("#turnon").hide();
  }

  function showLiquiddamage() {
    $("#liquiddamage").show();
  }

  function hideLiquiddamage() {
    $("#liquiddamage").hide();
  }

  function showResult() {
    $("#result").show();
  }

  function hideResult() {
    $("#result").hide();
  }


});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id = "tabletmobilerepairform">
  <div class = "col-md-12 col-sm-12 col-xs-12 nopad" id = "create">
    <div class = "form-group text-center">
      <b>Is it a tablet or a phone?</b><br />
      <div class = "radio" id = "phone">
        <label>
                        <input type = "radio" name = "phone" id = "phone_yes" value = "1">
                        It's a tablet.
                    </label>

      </div>
      <div class = "radio">
        <label>
                        <input type = "radio" name = "phone" id = "phone_no" value = "0">
                        It's a phone.
                    </label>
      </div>
    </div><br/> <!-- tablets or phones --> 
    <div class = "form-group" id = "brand">
     <b>What is the brand of your phone?</b><br />
                <label>
                        <input type = "radio" name = "brand" id = "applephone" value = "b1">
                        Apple
                    </label><br/>
                <label>
                        <input type = "radio" name = "brand" id = "samsungphone" value = "b2">
                        Samsung
                    </label><br/>
                <label>
                        <input type = "radio" name = "brand" id = "nokiaphone" value = "b3">
                        Nokia
                    </label><br/>
                <label>
                        <input type = "radio" name = "brand" id = "sonyphone" value = "b4">
                        Sony
                    </label><br/>
                <label>
                        <input type = "radio" name = "brand" id = "otherphone" value = "b5">
                        Other
                    </label>
                   
    </div><br/>  <!-- Which brand of phones --> 
            <div class = "form-group" id = "ipmodel">
                <b>What is the model of your phone?</b><br />
                <select class = "form-control" name = "ipmodel" id = "ipmodel">
                    <option value = "i1" id = "ip5">iPhone 5</option>
                    <option value = "i2" id = "ip5c">iPhone 5c</option>
                    <option value = "i3" id = "ip5s">iPhone 5s</option>
                    <option value = "i4" id = "ip6">iPhone 6</option>
                    <option value = "i5" id = "ip6p">iPhone 6 Plus</option>
                    <option value = "i6" id = "ipse">iPhone SE</option>
                    <option value = "i7" id = "ip6s">iPhone 6s</option>
                    <option value = "i8" id = "ip6sp">iPhone 6s Plus</option>
                    <option value = "i9" id = "ip7">iPhone 7</option>
                    <option value = "i10" id = "ip7p">iPhone 7 Plus</option>
                    <option value = "i11" id = "ip8">iPhone 8</option>
                    <option value = "i12" id = "ip8p">iPhone 8 Plus</option>
                    <option value = "i13" id = "ipx">iPhone X</option>
                    <option value = "i14" id = "ipo">Other</option>                   
                </select>
            </div><br/> <!-- Apple phones -->  
    <div class = "form-group" id = "stype">
                <b>Is it a Samsung Galaxy S series or Galaxy Note series phone?</b><br />

      <select class = "form-control" name = "stype" id = "stype">
                    <option value = "st1" id = "gss">Galaxy S series</option>
                    <option value = "st2" id = "gns">Galaxy Note series</option>
                    <option value = "st3" id = "go">Other</option>
                </select>
    </div><br/> <!-- Samsung what phones -->  
                <div class = "form-group" id = "sgsmodel">
                <b>What is the model of your phone?</b><br />
                <select class = "form-control" name = "sgsmodel" id = "sgsmodel">">
                    <option value = "g1" id = "gs4">Galaxy s4</option>
                    <option value = "g2" id = "gs5">Galaxy s5</option>
                    <option value = "g3" id = "gs6">Galaxy s6</option>
                    <option value = "g4" id = "gs6e">Galaxy s6 Edge</option>
                    <option value = "g5" id = "gs6ep">Galaxy s6 Edge+</option>
                    <option value = "g6" id = "gs7">Galaxy s7</option>
                    <option value = "g7" id = "gs7e">Galaxy s7 Edge</option>
                    <option value = "g8" id = "gs8">Galaxy s8</option>
                    <option value = "g9" id = "gs8p">Galaxy s8+</option>  
                    <option value = "g10" id = "gs9">Galaxy s9</option>  
                    <option value = "g11" id = "gs9p">Galaxy s9+</option> 
                    <option value = "g12" id = "gso">Other</option>    
                </select>
            </div><br/>   <!-- Samsung S phones -->               
                <div class = "form-group" id = "sgnmodel">
                <b>What is the model of your phone?</b><br />
                <select class = "form-control" name = "sgnmodel" id = "sgnmodel">">
                    <option value = "sgn1" id = "gn3">Galaxy Note 3</option>
                    <option value = "sgn2" id = "gn4">Galaxy Note 4</option>
                    <option value = "sgn3" id = "gne">Galaxy Note Edge</option>
                    <option value = "sgn4" id = "gn5">Galaxy Note 5</option>
                    <option value = "sgn5" id = "gn7">Galaxy Note 7</option>
                    <option value = "sgn6" id = "gnfe">Galaxy Note Fan Edition</option>
                    <option value = "sgn7" id = "gn8">Galaxy Note 8</option>
                    <option value = "sgn8" id = "gn9">Galaxy Note 9</option>
                    <option value = "sgn9" id = "gno">Other</option>    
                </select>
            </div><br/>  <!-- Samsung Note phones -->       
            <div class = "form-group" id = "nmodel">
                <b>What is the model of your phone?</b><br />
                <select class = "form-control" name = "nmodel" id = "nmodel">">
                    <option value = "nn1" id = "n3">Nokia 3</option>
                    <option value = "nn2" id = "n5">Nokia 5</option>
                    <option value = "nn3" id = "n6">Nokia 6</option>
                    <option value = "nn4" id = "n8">Nokia 8</option>
                    <option value = "nn5" id = "n31">Nokia 3.1 2018 version</option>
                    <option value = "nn6" id = "n51">Nokia 5.1 2018 version</option>
                    <option value = "nn7" id = "n61">Nokia 6.1 2018 version</option>            
                    <option value = "nn8" id = "no">Other</option>                    
                </select>
            </div><br/>   <!-- Nokia phones --> 
            <div class = "form-group" id = "smodel"> 
                <b>What is the model of your phone?</b><br />
                <select class = "form-control" name = "smodel" id = "smodel">">
                    <option value = "x1" id = "xz3">Xperia Z3</option>
                    <option value = "x2" id = "xz4">Xperia Z4</option>
                    <option value = "x3" id = "xz5">Xperia Z5</option>
                    <option value = "x4" id = "xx">Xperia X</option>
                    <option value = "x5" id = "xxa">Xperia XA</option>
                    <option value = "x6" id = "xxz">Xperia XZ</option>
                    <option value = "x7" id = "xxa1">Xperia XA1</option>
                    <option value = "x8" id = "xo">Other</option>                                       
                </select>
            </div><br/> <!-- Sony phones -->                     
             <div class = "radio" id = "turnon">
              <b>Does it still turn on?</b><br />
        <label>
                        <input type = "radio" name = "turnon" id = "turnon_yes" value = "t1">
                        Yup it turns on.
                    </label>
                    <label>
                        <input type = "radio" name = "turnon" id = "turnon_no" value = "t0">
                        No it doesn't! 
                    </label>
      </div><br/> <!--if device can power on or not -->        
      <div class = "radio" id = "liquiddamage">
           <b>Has it been liquid damaged?</b><br />
        <label>
                        <input type = "radio" name = "liquiddamage" id = "liquiddamage_yes" value = "111">
                        Yup it went for a swim. 
                    </label>
          <label>
                        <input type = "radio" name = "liquiddamage" id = "liquiddamage_no" value = "110">
                        Nope. 
                    </label>
      </div><br/> <!-- if device's been liquid damaged  --> 
      <div class = "form-group" id = "problem">
                <b>General Services</b><br />
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p1">
                        Screen Replacement (Original Quality)
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p2">
                        Screen Replacement (Aftermarket Quality)
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p3">
                        Battery Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p4">
                        Power Button Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p5">
                        Volume/Mute Button Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p6">
                        Loudspeaker Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p7">
                        Earpiece Replacement
                    </label><br/>
          
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p8">
                        Microphone Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p9">
                        Charging Port Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p10">
                        Front Camera Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p11">
                        Rear Camera Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p12">
                        Proximity Sensor Replacement
                    </label><br/>
                <label>
                        <input type = "radio" name = "problem" id = "problem" value = "p13">
                        Home Button Replacement
                    </label><br/>
          
      </div><br/> <!-- list of repairs -->
                        
<div id = "result">
     <b>So the estimated total cost is</b><br />
       <input type = "text" id = "finalpriceexcvat" />
    </div> <!--Total cost-->
    </div>
      </form>

вы можете использовать событие onchange

— 05.07.2018 08:10

Есть ли причина, по которой вы не используете для этого фреймворк? Что-то вроде Angular или React? Для этого лучше бы подошел даже Нокаут.

— 05.07.2018 08:11

Нельзя добавить click event listener для option id

— 05.07.2018 08:12

Предложение: почему бы не оставить вопросы видимыми? Действительно ли будет лучше, если вы скроете их и реализуете специальную логику, чтобы показать их? В качестве альтернативы, в зависимости от того, какие браузеры вы поддерживаете, не могли бы вы дать каждому вопросу высоту 100vh и использовать Точки привязки CSS? Тогда все, что вам нужно будет сделать, это изменить цель после каждого вопроса.

— 05.07.2018 08:16

Что касается конкретного вопроса, вы можете изменить событие на change, сгруппировать свои переключатели в fieldset вместо div и использовать делегирование мероприятия, чтобы избежать повторения кода: $("#fieldset-id").on("change", "input", function (e) { /* show and hide */ });

— 05.07.2018 08:19

@WesleyCoetzee argh ... да, я был похож на jquery, затем щелкнул и вставил мои коды ... D:

— 05.07.2018 09:12

@ Доктор Стрэндж Черт ... вот почему ...

— 05.07.2018 09:13

@Aankhen Ну, я думал, что сайт будет выглядеть чище, если я скрою и покажу вопросы. Особенно с учетом, скажем, только «моделей Samsung Galaxy S», у меня там около 11 вариантов, если я собираюсь включить «iPhone», «Sony» и т. д., Это будет примерно ... 30 вариантов? А затем с вопросом о повреждении жидкости, включается ли он и т. д., Лично я просто не большой поклонник прокрутки вверх и вниз при просмотре веб-страницы.

— 05.07.2018 09:16

@Aankhen Спасибо за предложение. Я повторял свои коды, так как кажется "проще" заставить его работать, а затем выработать лучшее решение .. Я знаю, что это действительно похоже на кластер f # $ k: P

— 05.07.2018 09:20

@NikhilGhuse Привет, спасибо, что подарили мне альтернативное решение ... однако это не отвечает на мой вопрос о том, почему чертовски прослушиватель не отвечает после выбора параметров ... Пока доктор Стрэндж не указал, что это не работает с идентификатором параметра .

— 05.07.2018 09:24

javascript jquery html

05.07.2018 08:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

(Мой английский не очень хорош. Так что простите меня, если я написал или написал какие-то ужасные вещи) Без использования Id вы можете упростить это, используя 'class'

<div class = "form-group text-center">
      <b>Is it a tablet or a phone?</b><br />
      <div class = "radio" id = "phone">
        <label>
           <input type = "radio" name = "phone" id = "phone_yes" value = "1" class = "phone_values">
               It's a tablet.
        </label>

      </div>
      <div class = "radio">
        <label>
           <input type = "radio" name = "phone" id = "phone_no" value = "0" class = "phone_values">
             It's a phone.
        </label>
      </div>
    </div>

Функции выглядят так:

$(document).ready(function() {
   showProblem();
   hideBrand();
   hideProblem();
   hideIpmodel();
   hideStype();
   hideSgsmodel();
   hideSgnmodel();
   hideNmodel();
   hideSmodel();
   hideTurnon();
   hideLiquiddamage();


   var phone_values = document.getElementsByClassName( "phone_values" );

   for( var a = 0; a < phone_values.length; a++ ) {

      phone_values[a].addEventListener( "click", function() {

         showBrand(); //call the function you want to show next. 
                      //no need to call hide functions.

      }

   } 

} );

Если вы сделаете что-то подобное,

document.getElementById('gns').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    showStype(); //show
    hideSgsmodel();
    showSgnmodel();
    hideNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });

  document.getElementById('nokiaphone').addEventListener('click', function() {
    showBrand();
    hideProblem();
    hideIpmodel();
    hideStype(); //hide*
    hideSgsmodel();
    hideSgnmodel();
    showNmodel();
    hideSmodel();
    hideTurnon();
    hideLiquiddamage();
  });

когда вы выбираете 'gns', начинают отображаться типы. но всякий раз, когда вы выбираете тип, он сам по себе скрывает типы. из-за этого каждый раз вызывайте только ту функцию, которую хотите показать.

Спасибо за ваше решение. Он выглядит намного чище, чем мой ... Короче говоря, eventlistener не будет работать с идентификатором опции, но будет реагировать на значения?

— 05.07.2018 09:29

EventListeners работают как для Id, так и для класса, но если вы используете Id, вам нужно написать eventListeners для каждого элемента. С class вы можете написать один eventListener и зациклить его. И еще один момент - не вызывайте каждый раз скрытые функции. Просто вызовите функцию "показать".

— 05.07.2018 09:40

Интересно .. Дананджая, можно ли поместить это в JSFiddle? Я не могу ничего распечатать после getElementbyClassname. Спасибо

— 05.07.2018 10:33

05.07.2018 08:19