I have 10 input boxs on my page..

<input type="text" id="box1">
<input type="text" id="box2">
<input type="text" id="box3">
<input type="text" id="box4">
<input type="text" id="box5">
<input type="text" id="box6">
<input type="text" id="box7">
<input type="text" id="box8">
<input type="text" id="box9">
<input type="text" id="box10">

Using JavaScript I want to be able to select the input of each, but only on request using JavaScript.

I have used the following code:

document.getElementById("box1").value

which returns the value (which I want)

However I want to be able to do something with it then request the next item then do something with that..

So I have created a dummy Variable (placed outside my function as I don't want to reset the value back to 1 each time the function is called:

var current_item = "1";

I then wanted to be able to select a item using this variable and I have used it like:

document.getElementById("box" + current_item).value
current_item = current_item + 1;

however it's not working. If I alert the current_item variable it returns undefined.

If I add the current_item variable to my function it works and does what I want it to do, but keeps resetting back to 1 (as the function is recreating the variable).

Can anyone help me out on this on how to get the next input box value ?

I have 10 input boxs on my page..

<input type="text" id="box1">
<input type="text" id="box2">
<input type="text" id="box3">
<input type="text" id="box4">
<input type="text" id="box5">
<input type="text" id="box6">
<input type="text" id="box7">
<input type="text" id="box8">
<input type="text" id="box9">
<input type="text" id="box10">

Using JavaScript I want to be able to select the input of each, but only on request using JavaScript.

I have used the following code:

document.getElementById("box1").value

which returns the value (which I want)

However I want to be able to do something with it then request the next item then do something with that..

So I have created a dummy Variable (placed outside my function as I don't want to reset the value back to 1 each time the function is called:

var current_item = "1";

I then wanted to be able to select a item using this variable and I have used it like:

document.getElementById("box" + current_item).value
current_item = current_item + 1;

however it's not working. If I alert the current_item variable it returns undefined.

If I add the current_item variable to my function it works and does what I want it to do, but keeps resetting back to 1 (as the function is recreating the variable).

Can anyone help me out on this on how to get the next input box value ?

• javascript
• getelementbyid

• Is it working the first time? when presumably current_item is one? I am thinking the second time you are looking for "box11" and thrid time "box111" – Sap Commented Oct 19, 2012 at 2:19
• Doesn't even work the first time.. it es back saying undefined when I run it. when I add var current_item = "1"; to the function it works but never adds to the number and its always set to 1. – Aaron Commented Oct 19, 2012 at 2:37

4 Answers 4

Try making current_item a number instead of a string.

var current_item = 1;

instead of

var current_item = "1";

jsFiddle example

current_item is a string and when you use the + operator, it does concatenation instead of addition.

"1" + 1
"11"

If you use var current_item = 1;, it'll be an integer and you can add it by doing +1

Also,

var current_item = "1";
current_item = current_item*1 + 1;
2

When you multiply by 1, it casts it to an int, then adds 1, which results in 2 as you would expect.

Related question: Javascript (+) sign concatenates instead of giving sum of variables

My guess is that you're messing with different types. current_item starts as a string but then you add a number so the result of current_item + 1 would be 11 not 2. Try with:

var current_item = 1

It seems that you are mixing strings and numbers, as explained in the other answers.

Now, your question is about grabbing the next input. Instead of relying on the ids, you could simply use node.nextSibling:

https://developer.mozilla/en-US/docs/DOM/Node.nextSibling

var firstItem=document.getElementById("box1");
var nextItem=firstItem.nextSibling;
etc.