JavaScript getElementById 返回 null

Question

我正在学习 JavaScript，我想知道为什么会这样：

document.getElementById('partofid'+variable+number) 不起作用？

这是示例和JSfiddle链接，我希望“下一步”按钮删除显示的项目并显示下一个。

HTML：

<div id="div-1"> 1 </div>
<div id="div-2" style="display: none"> 2 </div>
<div id="div-3" style="display: none"> 3 </div>
<div id="div-4" style="display: none"> 4 </div>

<a id="next" href="#">next</a>

JS：

var counter = 1;
var button = document.getElementById('next');

button.addEventListener("click",function(){
    var currentDiv = document.getElementById('div-'+counter);
    currentDiv.remove();
    var nextDiv = document.getElementById('div-'+counter+1);
    alert(nextDiv); // why does it return null
    alert('div-'+counter+1); // while this doesn't?
    nextQuestion.style.display = "block";
    counter++;
},true);

Answer 1

尝试使用parseInt：

var nextDiv = document.getElementById('div-'+parseInt(counter+1,10));

parseInt 函数将它的第一个参数转换为一个字符串，解析它，并返回一个整数。第二个参数是基数，它是“基数”，就像在数字系统中一样。

演示