admin管理员组

文章数量:1307401

I'm learning JavaScript and I'm wondering why something like:

document.getElementById('partofid'+variable+number) doesn't work?

Here are samples and JSfiddle link, I want "next" button to remove displayed item and show the next one.

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

I'm learning JavaScript and I'm wondering why something like:

document.getElementById('partofid'+variable+number) doesn't work?

Here are samples and JSfiddle link, I want "next" button to remove displayed item and show the next one.

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

• javascript
• getelementbyid

Share Improve this question Follow edited Dec 7, 2013 at 3:37 vinay Maneti 1,45111 gold badge2323 silver badges3232 bronze badges asked Dec 7, 2013 at 3:34 WordpressorWordpressor 7,5532626 gold badges7474 silver badges115115 bronze badges 4

• string + 1 + 1 === string11 – adeneo Commented Dec 7, 2013 at 3:42
• @adeneo unless of course var string = '1' instead of var string = "string" – gillyspy Commented Dec 7, 2013 at 3:50
• @gillyspy - then you'd have 111 – adeneo Commented Dec 7, 2013 at 4:03
• @adeneo yeah i meant to put var string = 1 meaning the answer would be 3,but then the edit timer ran out. You were mixing metaphors is my point and now I've ironcially mixed metaphors by saying you were "mixing metaphors" – gillyspy Commented Dec 7, 2013 at 4:20

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

Try using parseInt:

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

The parseInt function converts its first argument to a string, parses it, and returns an integer.The second arguement is radix which is "base", as in a number system.

Demo

What's going on here is Javascript has some strange rules about types and the + operator.

string + anything means convert anything to string, then concatenate them together. So "foo" + "bar" == "foobar"... and "div" + 1 == "div1".

The the next step, addition is done left to right, so "div" + 1 + 1 goes to "div" + 1 == "div1".

"div1" + 1... remember, convert to string then put together, so we get "div1"+ 1 == "div11".

I would put parenthesis around your arithmetic. "div" + (1+1) would do the right hand side thing first, so (1+1) == 2 as you expect, then "div" + 2 == "div2", so that's what you expect.

As to the alert thing, your first one is looking at the result of the element lookup, and the second one is looking at the string itself. So the first is null because the element lookup didn't find anything.

This code results in string concatenation. E.g. if counter is 1, then you will get div-11

'div-'+counter+1

This is because addition is resolved from right to left. Then you try to retrieve element with id div-11, but you don't have html element with such an id. That's why the function getElementById returns null.

To solve the problem first add counter to 1 and then join it with div, like this 'div-'+(counter+1)

Because counter+1 = 11 => id = div-11 is not exist. Try this:

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

it does work and does exactly what you asked it to do but since you do not have a div-11 there is nothing found so the evaluation returns null.

if you want div-2 then simply use order of operations to sum the counter to the number:

Fiddle

Here is your answer:

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

To solve this kind of returning "null" values by getElementById("").

you can use script inside the body instead of head it will return the html element.

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 returns nullStack Overflow