JavaScript的getElementById返回null。

Question

JavaScript的getElementById返回null。

javascriptgetelementbyid

3

我正在学习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);

- Wordpressor

string + 1 + 1 === string11 - adeneo

@adeneo，除非var string = "string"，否则将变量声明为var string = '1'。 - gillyspy

@gillyspy - 然后你会得到 111。 - adeneo

@adeneo 是的，我的意思是要写var string = 1这句话，意味着答案将是3，但是时间编辑器已经用完了。我的意思是你弄混了隐喻，现在我说你在“混淆隐喻”，反而混淆了隐喻。 - gillyspy

7个回答

2

这段代码会进行字符串拼接。例如，如果计数器为1，则会得到div-11。

'div-'+counter+1

这是因为加法从右往左计算。然后你尝试检索具有id div-11的元素，但你没有这样一个id的html元素。这就是为什么函数getElementById返回null的原因。

为了解决问题，首先将计数器加1，然后与div连接起来，像这样'div-'+(counter+1)。

- Asterisk

2

这里发生的情况是JavaScript有一些奇怪的关于类型和+运算符的规则。

string + anything表示将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"，这是您所期望的结果。

至于提示(alert)的事情，你的第一个提示看的是元素查找的结果，而第二个提示看的是字符串本身。因此第一个为空，因为元素查找没有找到任何内容。

- Adam D. Ruppe

0

因为 counter+1 = 11 => 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);

- Ringo

0

这是你的答案：

<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>

- Musfiqur rahman

除非在body onload中调用JavaScript函数，否则没有名为“next”的元素，因为HTML尚未被解析。 - Musfiqur rahman

0

它确实有效，并且正是您要求的，但由于您没有div-11，因此找不到任何内容，因此评估返回null。

如果您想使用div-2，那么只需使用运算顺序将计数器与数字相加：

Fiddle

- gillyspy

0

为了解决通过getElementById("")返回"null"值的问题，您可以在body中使用脚本而不是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>

- sureandhar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joke_Sense10 · Accepted Answer

试试使用parseInt函数：

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

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

演示