Увеличение переменной javascript внутри html

Question

Это должен быть довольно простой вопрос. Я просто хочу ввести переменную «inputNumber» в добавочный фрагмент html здесь. Входной номер должен увеличиваться каждый раз, когда он добавляет этот html.

Так что в основном я хочу, чтобы имя ввода, id и id div увеличивалось с 5 каждый раз, когда нажимается «addMore».

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

Answer 1

Вы просто не закончили строку перед вставкой переменной.

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

Вы можете видеть по синтаксису, выделяя разницу в коде. У вас также должна быть эта функция IDE.

Вы пытались использовать оператор инкремента (++) несколько раз. Это также проблема, так как каждый раз, когда вы вызываете inputNumber++, значение увеличивается. Это означает, что в вашем коде (с фиксированными кавычками) вы все равно увеличивали значение на 3, потому что вы вызывали inputNumber++ 3 раза. Я изменил это поведение, вызвав inputNumber++ только один раз в начале обратного вызова.

---

Вы также можете думать об улучшении удобочитаемости вашего кода, используя этот синтаксис для создания элементов с атрибутами -

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

Answer 2

Вызов inputNumber++ один раз за пределами Append в противном случае вы будете приращением каждый раз он указанный в длинной строке, которую вы добавляете. Операторы приращения самонастраиваются, что означает, что они увеличиваются на 1 и присваивают значение, увеличиваемое все одновременно. Код эквивалент 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>"); 
}); 

С другой, как вы имели его, результирующий HTML для первого щелчка был бы:

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

Кроме того, убедитесь, что вы строку текста правильно сцеплены.