Incrementing javascript variable within html

Question

This should be a pretty simple question. I'm just looking to input the variable "inputNumber" into the appending html snippet here. The inputNumber should increment every time it appends this html.

So basically I want the input name, id, and the div id to increment from 5 everytime "addMore" is clicked.

var inputNumber = 5;

$("#addMore").click(function() {
$("#input-names").append("<input type='text' id='name' + inputNumber++ name='name' + inputNumber++> <div class='delete-line' id='delete-' + inputNumber++><a href='JavaScript:void(0);'>X</a></div><br>");
});

Analyze the syntax highlighting more closely...See that?

elclanrs
– elclanrs

2013-04-25 00:15:51 +00:00
Commented Apr 25, 2013 at 0:15 — elclanrs
– elclanrs, Commented Apr 25, 2013 at 0:15

Lix · Accepted Answer · 2013-04-25 00:26:39Z

4

You simply didn't terminate the string before inserting the variable.

var inputNumber = 5;

$("#addMore").click(function() {
  inputNumber++;
  $("#input-names").append("<input type='text' id='name"+ inputNumber +"' name='name"+ inputNumber +"' > <div class='delete-line' id='delete-"+ inputNumber +"'><a href='JavaScript:void(0);'>X</a></div><br>");
});

You can see by the syntax highlighting the difference in the code. You're IDE should have this feature too.

You were trying to use the increment operator (++) several times. This is also a problem as each time you call inputNumber++ the value is incremented. That means that in your code (with the quotes fixed), you were still incrementing the value by 3 because you called inputNumber++ 3 times. I changed this behavior by calling inputNumber++ only once at the beginning of the click callback.

You might also want to think about improving your code's readability by using this syntax to create elements with attributes -

var inputElem = $('<input />', {
    type: 'text',
    id: 'name'+inputNumber,
    name: 'name'+inputNumber
});

edited Apr 25, 2013 at 0:26

answered Apr 25, 2013 at 0:16

Lix

48.2k12 gold badges107 silver badges134 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Niet the Dark Absol Over a year ago

The "+inputNumber+" should be inside the id='name' quotes.

Barmar Over a year ago

And all the other attribute quotes.

Josh Woelfel Over a year ago

Okay so your impovements of my code worked, but for some reason when I click "addMore" and then submit all of the inputs, it does not register the newly added inputs as "name6" "name7", etc. It just registers them as "name". So for some reason the 5 is not incrementing, and a number isn't even being added to the input.

SomeShinyObject · Accepted Answer · 2013-04-25 00:23:39Z

Call inputNumber++ once outside of the append otherwise you will be incrementing everytime it is stated inside the long string you are appending. Increment operators are self-assigning, which means they increment by 1 and assign to the value incremented all at once. The code equivalent of inputNumber = inputNumber + 1

$("#addMore").click(function() {
    inputNumber++;
    $("#input-names").append("<input type='text' id='name" + inputNumber + "' name='name" + inputNumber + "'> <div class='delete-line' id='delete-" + inputNumber + "'><a href='JavaScript:void(0);'>X</a></div><br>");
});

With the other way you had it, the resultant HTML for the first click would have been:

<input type='text' id='name6' name='name7' />
<div class='delete-line' id='delete8'>
    <a href='javascript:void(0);'>X</a>
</div>

Also, ensure you string of text is concatenated correctly.

Collectives™ on Stack Overflow

Incrementing javascript variable within html

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related