javascript - 在 document.getElementById 中传递变量返回 Null

Question

当使用变量调用document.getElementById时，它返回空值。下面是示例代码:

function savenext(k)
{
  qdd=k.id;
  var divs = document.getElementsByClassName("qpanel");
  for(var i=0;i<divs.length;i++) 
  {
    divs[i].style.display = "none";
  }
  str = qdd.replace(/SN/g, '');
  str='Q'+str;
  var d = document.getElementById(str);
  d.style.display = "block";
}

<div id="main" class="qpanel" id="Q3">
    	Q3
    </div>
    
    <div id="main" class="qpanel" id="Q2">
    	Q2
    </div>
    
    <div id="main" class="qpanel" id="Q6">
    	Q6
    </div>
    
    <input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext">
    <input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext">
    <input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext">

document.getElementById(str) 返回 null

Answer 1

这是可行的解决方案。你给了 div 两个 id

<script >

function savenext(k)
{
    qdd=k.id;
    divs = document.getElementsByClassName("qpanel");
    for(var i=0;i<divs.length;i++) 
    {     
    console.log(divs[i])
        divs[i].style.display = "none";
    }
    str = qdd.replace(/SN/g, '');
    str='Q'+str;
    var d = document.getElementById(str);
    console.log(str)
    d.style.display = "block";
}


</script>
<div class="qpanel" id="Q3">
    Q3
</div>

<div class="qpanel" id="Q2">
    Q2
</div>

<div class="qpanel" id="Q6">
    Q6
</div>

<input type="button" value="Save and next" id="SN3" onclick="savenext(this)" class="savenext">
<input type="button" value="Save and next" id="SN2" onclick="savenext(this)" class="savenext">
<input type="button" value="Save and next" id="SN6" onclick="savenext(this)" class="savenext">