Html Question posted in
Some basic documentation can be found here.

Why does my querySelector not select the correct ID for a step in an HTML form?

My digiNextStepMobil does not get called properly and the form does not go the step2, when I press the button.

HTML

<form id="digi-productGuideForm-mobil">
  <div id="digi-step1-1" class="digi-step">
    <h2>Hvor skal ladestanderen placeres?</h2>
    <label>
      <input id="beskrivelser" type="radio" name="placement" value="commonParking">
      Fælles p-plads
    </label><br>
    <label>
      <input type="radio" name="placement" value="parkingGarage">
      P-kælder
    </label><br>
    <label>
      <input type="radio" name="placement" value="residentParking"> 
        Beboerens egen p-plads
    </label><br>
    <nav id="digi-buttons">
      <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">
        Næste
      </button>
    </nav>
  </div>
  <div id="digi-step2-1" class="digi-step" style="display: none;">
    <h2>Hvor mange ladeudtag har foreningen brug for?</h2>
    <label>
      <input type="radio" name="outlets" value="upTo10"> 
      Op til 10 ladeudtag
    </label><br>
    <label>
      <input type="radio" name="outlets" value="moreThan10"> 
      Mere end 10 ladeudtag
    </label><br>
    <nav id="digi-buttons">
      <button type="button" id="digi-tilbageKnap1" onclick="digiPreviousStepMobil()">
        <span class="material-symbols-outlined"> 
          arrow_back_ios 
        </span> 
        Tilbage
      </button>
      <button type="button" id="digi-næsteKnap1" onclick="digiNextStepMobil()">
        Næste
      </button>
    </nav>
  </div>
  
  <!--
     And so on with step digi-step3-1 and digi-step 4-1.
  -->

SCRIPT

function digiNextStepMobil() {
  var digiCurrentStep = document.querySelector('.digi-step:not([style*="display: none"])');
  var digiNextStep    = digiCurrentStep.nextElementSibling;

  if (digiCurrentStep.id === "digi-step1-1") {
    var digiPlacement = document.querySelector('input[name="placement"]:checked').value;
    
    if (digiPlacement === "residentParking" || digiPlacement === "parkingGarage") {
      document.getElementById("digi-step2-1").style.display = "none";
      document.getElementById("digi-step3-1").style.display = "none";
      digiNextStep = document.getElementById("digi-step4-1");
    }
  }

  if (digiCurrentStep.id === "digi-step3.1") {
    var digiHomes = document.querySelector('input[name="homes"]:checked').value;
    
    if (digiHomes === "moreThan40") {
      digiShowResultMobil();
      return;
    }
  }

  if (digiNextStep) {
    digiShowStep(digiNextStep);
  }
}

I tried giving the ID’s differnet names in terms of perhaps dots and (-) not being allowed, but this was not the case.

Tags:

2

Answers


  1. 0

    id="digi-tilbageKnap1" you posted this twice. Ids must be unique in this error html. It might work if you declare the ids multiple times in proper css, but it doesn’t work in javascript. So always give different id.

    Login or Signup to reply.
  2. 0

    my advice, with a little more knowledge of HTML5 and CSS3,
    you will get lighter and easier to maintain code 😉

    const digiForm = document.querySelector('#digi-productGuideForm-mobil');

digiForm.next_Field.addEventListener('click', ()=>f_showField(+1));
digiForm.prev_Field.addEventListener('click', ()=>f_showField(-1));

function f_showField( mov )
  {
  digiForm.className = `digi-step${ +digiForm.className.match(/(d+)/)[0] + mov }`;
  }
    form     { width   : 30em;   }
fieldset { margin  : 1em;    }
label    { display : block;  }
legend   { padding : 0 .5em; }

nav > button { width : 6em }

form.digi-step1 fieldset:not(:nth-child(1)) ,
form.digi-step2 fieldset:not(:nth-child(2)) ,
form.digi-step3 fieldset:not(:nth-child(3)) ,
form.digi-step4 fieldset:not(:nth-child(4)) {  display: none; }  

form.digi-step1 nav > button[name="prev_Field"] ,
form.digi-step4 nav > button[name="next_Field"] { visibility:hidden; }
    <form id="digi-productGuideForm-mobil" class="digi-step1">
  <fieldset>
    <legend>Hvor skal ladestanderen placeres?</legend>
    <label> <input type="radio" name="placement" value="commonParking"   > Fælles p-plad          </label> 
    <label> <input type="radio" name="placement" value="parkingGarage"   > P-kælder               </label> 
    <label> <input type="radio" name="placement" value="residentParking" > Beboerens egen p-plads </label> 
  </fieldset>
  <fieldset>
    <legend>Hvor mange ladeudtag har foreningen brug for?</legend>
    <label> <input type="radio" name="outlets" value="upTo10"     > Op til 10 ladeudtag   </label> 
    <label> <input type="radio" name="outlets" value="moreThan10" > Mere end 10 ladeudtag </label> 
  </fieldset>
  <fieldset>
    <legend> fieldset 3</legend>
    <label> <input type="radio" name="ccc" value="x31" > ccc+1 </label> 
    <label> <input type="radio" name="ccc" value="x32" > ccc+2 </label> 
  </fieldset>
  <fieldset>
    <legend> fieldset 4</legend>
    <label> <input type="radio" name="ddd" value="x41" > ddd+1 </label> 
    <label> <input type="radio" name="ddd" value="x42" > ddd+2 </label> 
  </fieldset>

  <nav>
    <button type="button" name="prev_Field"> Tilbage </button>
    <button type="button" name="next_Field"> Næste   </button>
  </nav>

  <!-- ... -->
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search