У меня есть эта функция (она работает) для создания ряда динамических входов:
<script type='text/javascript'>
var arr = [];
function espacioArreglos() {
// Number of inputs to create
var number = document.getElementById("cantidadArreglos").value;
// Container <div> where dynamic content will be placed
var container = document.getElementById("container");
// Clear previous contents of the container
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
for (i=0;i<number;i++){
// Append a node with a random text
container.appendChild(document.createTextNode("Arreglo #" + (i+1)));
// Create an <input> element, set its type and name attributes
var input = document.createElement("input");
input.type = "number";
input.name = "arreglo" + i;
//set ID to each input to calculate summatory
var inputId = 'input-' + i;
input.setAttribute('id', inputId);
arr.push(inputId);
input.setAttribute('onchange', function() {
var sum = 0;
arr.forEach(function(val) {
var inputVal = document.getElementById(val).value;
if (inputVal) sum += inputVal;
});
document.getElementById('totalPlacas').value = sum;
});
container.appendChild(input);
// Append a line break
container.appendChild(document.createElement("br"));
}
}
</script>
И теперь я хочу отобразить сумму входных значений. Вот HTML-код:
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de arreglos:</td>
<td align="center" bgcolor="#D4D4D4"><input type="number" id="cantidadArreglos" onchange="espacioArreglos();" size="1"></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Cantidad de placas:</td>
<td bgcolor="#FFFF00"><div id="container"/></td>
</tr>
<tr>
<td align="center" bgcolor="#D4D4D4">Total de placas:</td>
<td align="center" bgcolor="#D4D4D4"><div id="totalPlacas"></div></td>
</tr>
Таким образом, вы вводите число в «Cantidad de arreglos», оно вызывает функцию «espacioArreglos», а затем я хочу использовать значения, которые я введу для сгенерированных входных данных, чтобы вычислить его сумму, которая должна отображаться в div «totalPlacas». » . Однако ничего не появляется ... В чем проблема с моим кодом?
3 ответа
Есть некоторые изменения, которые необходимо сделать:
Во-первых, измените <div id="container"/>
до <div id="container"></div>
, поскольку ярлык на элементе div прерывает HTML, в результате чего totalPlacas не существует.
Во-вторых, добавьте событие onchange, используя
input.onchange = function() {...}
Теперь результат должен быть добавлен в div 'totalPlacas', используя .innerText = sum, вместо этого используя .value = sum.
Теперь вы можете проверить, что отображаемый результат представляет собой конкатенацию строк вместо добавления чисел, это можно решить, заменив
if (inputVal) sum += inputVal;
С участием
if (inputVal) sum += parseInt(inputVal);
Вы должны добавить какую-то проверку, чтобы избежать ошибки, когда пользователь вводит букву или символ вместо числа.
Надеюсь, что это работает!
Вам нужно будет назначить уникальный идентификатор для элементов ввода, чтобы вы могли ссылаться на них, используя document.getElementById()
.
Что-то типа:
input.setAttribute("id", 'input' + i);
Как насчет присвоения идентификаторов динамическим входам и сохранения их в массиве. Во-первых, за пределами функции (глобальная область) определите пустой массив:
var arr = [];
В вашем цикле for:
var inputId = 'input-' + i;
input.setAttribute('id', inputId);
arr.push(inputId);
input.setAttribute('onchange', function() {
var sum = 0;
arr.forEach(function(val) {
var inputVal = document.getElementById(val).value;
if (inputVal) sum += inputVal;
});
// do something with the sum
console.log(sum)
});
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.