HTML表单querySelector选中步骤ID异常，表单无法跳转至step2

问题概述 #

点击"Næste"按钮时，digiNextStepMobil函数无法正常触发，表单无法跳转到step2。尝试修改ID命名（怀疑横杠/点不被允许）后问题仍存在，同时疑惑querySelector为何无法正确选中步骤ID。

原始代码 #

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.
  -->
</form>

JavaScript代码 #

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);
  }
}

问题根源分析 #

1. 未处理单选按钮未选中的情况：当用户未选择任何placement单选按钮时，document.querySelector('input[name="placement"]:checked')返回null，此时访问.value会抛出TypeError，直接中断函数执行，后续跳转逻辑根本无法运行。
2. ID拼写不一致：代码中判断digiCurrentStep.id === "digi-step3.1"，但HTML中对应的步骤ID是digi-step3-1（横杠 vs 点），导致该分支逻辑永远不会触发。
3. 重复ID：两个按钮导航容器的ID都是digi-buttons，ID必须唯一，虽然不直接影响当前函数调用，但会引发潜在的DOM操作异常。
4. nextElementSibling的不可靠性：如果步骤之间存在注释或其他非.digi-step节点，nextElementSibling可能选中错误元素。

修复方案 #

1. 添加单选按钮选中校验并修正逻辑 #

function digiNextStepMobil() {
  var digiCurrentStep = document.querySelector('.digi-step:not([style*="display: none"])');
  if (!digiCurrentStep) return; // 兜底：防止找不到当前步骤
  
  var digiNextStep = digiCurrentStep.nextElementSibling;
  // 跳过非.digi-step的节点（比如注释、换行）
  while (digiNextStep && !digiNextStep.classList.contains('digi-step')) {
    digiNextStep = digiNextStep.nextElementSibling;
  }

  if (digiCurrentStep.id === "digi-step1-1") {
    var selectedPlacement = document.querySelector('input[name="placement"]:checked');
    // 校验是否选中
    if (!selectedPlacement) {
      alert('Vælg venligst en placering!');
      return;
    }
    var digiPlacement = selectedPlacement.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");
    }
  }

  // 修正ID拼写：将digi-step3.1改为digi-step3-1
  if (digiCurrentStep.id === "digi-step3-1") {
    var selectedHomes = document.querySelector('input[name="homes"]:checked');
    if (!selectedHomes) {
      alert('Vælg venligst antal huse!');
      return;
    }
    var digiHomes = selectedHomes.value;
    
    if (digiHomes === "moreThan40") {
      digiShowResultMobil();
      return;
    }
  }

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

2. 修复重复ID #

将第二个按钮导航容器的ID修改为唯一值，比如：

<nav id="digi-buttons-2">
  <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æsteKnap2" onclick="digiNextStepMobil()">
    Næste
  </button>
</nav>

关于querySelector选中ID的疑问解答 #

• ID中的横杠是合法的：CSS选择器可以直接识别带横杠的ID，比如document.querySelector('#digi-step1-1')完全有效，不需要转义。
• ID中的点需要转义：如果ID包含点（如digi-step3.1），由于点在CSS中是类选择器的标识，需要用反斜杠转义：document.querySelector('#digi-step3\\.1')。但推荐ID使用横杠或下划线，避免特殊字符，减少不必要的麻烦。
• 你的问题和ID命名无关：之前的跳转失败是因为未处理单选按钮未选中的报错，而非ID命名不合法。

内容的提问来源于stack exchange，提问作者Nikolaj