Fiddle

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函数将其第一个参数转换为字符串，解析它并返回一个整数。第二个参数是radix，它是“base”，就像在数字系统中一样。

Demo

Answer 2

此代码导致字符串连接。例如。如果counter为1，那么您将获得div-11

'div-'+counter+1

这是因为添加从右到左解决。然后，您尝试检索标识为div-11的元素，但您没有具有此类ID的html元素。这就是函数getElementById返回null的原因。

要解决问题，首先将计数器添加到1，然后将其与div结合使用，例如'div-'+(counter+1)

Answer 3

这里发生的事情是Javascript对类型和+运算符有一些奇怪的规则。

string + anything意味着将任何东西转换为字符串，然后将它们连接在一起。所以“foo”+“bar”==“foobar”......和“div”+ 1 ==“div1”。

下一步，添加从左到右完成，因此“div”+ 1 + 1转到“div”+ 1 ==“div1”。

“div1”+ 1 ...记住，转换为字符串然后放在一起，所以我们得到“div1”+ 1 ==“div11”。

我会在你的算术周围添加括号。 “div”+（1 + 1）会首先做右手边的事情，所以（1 + 1）== 2如你所料，然后“div”+ 2 ==“div2”，这就是你所期望的。 / p>

关于警报事项，你的第一个是查看元素查找的结果，第二个是查看字符串本身。所以第一个是null，因为元素查找没有找到任何东西。

Answer 4

因为计数器+ 1 = 11 =＆gt; id = div-11不存在。试试这个：

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-'+Number(counter+1));
    alert(nextDiv); // why does it return null
    alert('div-'+Number(counter+1)); // while this doesn't?
    nextQuestion.style.display = "block";
    counter++;
},true);

Answer 5

它确实有效并完全按照您的要求执行，但由于您没有div-11，因此没有找到任何内容，因此评估返回null。

如果您需要div-2，只需使用order of operations将计数器与数字相加：

Fiddle

Answer 6

这是你的答案：

<html>
<head>
<script>
function load()
{
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?
    nextDiv.style.display = "block";
    counter++;
},true);
}
</script>
</head>


<body onload="load()">
<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>
</body>
<html>

Answer 7

要解决这种通过getElementById（“”）返回“空”值的问题。

您可以在正文中使用脚本而不是head ，它将返回html元素。

const m=document.getElementById('one')
const m1=document.getElementById('demo')
console.log(m1);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   

</head>
<body>

    <p id="demo">sample text</p>
    <script src="script.js"></script>
    
</body>
</html>

JavaScript getElementById返回null

7 个答案:

Fiddle