добавление неопределенного количества полей с использованием JavaScript - PullRequest
0 голосов
/ 01 апреля 2010

Я новичок в javascript и начинающий программист, так что это может быть действительно простой вопрос.Я хотел бы зациклить значения х количество полей и сложить их, чтобы отобразить сумму в конечном поле.Я могу выполнить эту функцию, если я явно вызываю каждое поле, но я хочу абстрагировать это, чтобы иметь дело с гибким количеством полей.Вот пример кода, который я придумал (он не работает для меня).Куда я иду не так?

<html>
<head>
<script type="text/javascript">
function startAdd(){
    interval = setInterval("addfields()",1);
}
function addfields(){
    a = document.addition.total.value;
    b = getElementByTagName("sum").value;
    for (i=0; i<=b.length; i++){
        a+=i;
    }
    return a;
}
function stopAdd(){
    clearInterval(interval);
}
</script>
</head>

<body>

<form name="addition">

 <input type="text" name="sum" onFocus="startAdd();" onBlur="stopAdd;">
+ <input type="text" name="sum" onFocus="startAdd();" onBlur="stopAdd;">
= <input type="text" name ="total">

</form>

</body>
</html>

Ответы [ 3 ]

1 голос
/ 01 апреля 2010

В вашем коде две вещи не так.

Первый:

b = getElementByTagName("sum").value;

Вы, вероятно, имеете в виду getElementsByTagName (обратите внимание на дополнительные s). Кроме того, нет <sum> элементов, что является проблемой, потому что вы не получите результатов. Наконец, .value вернет свойство value массива (а поскольку его не существует, вы получите undefined), а не массив свойств value каждого элемента.

Чтобы решить эти проблемы, вы можете написать это так:

inputElements = getElementsByTagName('input');
sumValues = [ ];

for(i = 0; i < inputElements.length; ++i) {
    if(inputElements[i].name == 'sum') {
        sumValues.push(inputElements[i].value);
    }
}

Или в jQuery:

sumValues = $('input[name=sum]').map(function() {
    return this.value;
});

Второй:

for (i=0; i<=b.length; i++){

b.length описывает количество элементов. С <= вы получаете доступ к b[b.length], которого не существует. Вы хотите получить доступ к b[b.length - 1], поэтому самый идиоматический способ написать это - переписать условие, чтобы использовать < вместо <=. То есть:

for(i = 0; i < b.length; ++i) {
0 голосов
/ 01 апреля 2010

Я бы использовал библиотеку jQuery и сделал бы сопоставление с образцом, чтобы получить все элементы, которые вы хотите добавить, а затем поместил бы это в ваше поле вывода

0 голосов
/ 01 апреля 2010

В вашем коде нет тегов с именем sum. Я бы предложил использовать атрибут class в ваших входных тегах, а затем использовать getElementsByTagName('input') и проверить, есть ли у них соответствующий класс. jQuery значительно упростит это, потому что вы сможете выделить все элементы с определенным классом в одной строке: $(".className"). Если вы не хотите jQuery, этот вопрос может быть интересен.

...