Чтение чисел с входов с JavaScript всегда возвращает NaN
Я хочу создать калькулятор, который просто суммирует 2 поля вверх. Но все, что я пробовал, не работает. Он также возвращает "NaN", также если я использую parseInt().
Здесь код:
<script type="text/javascript" language="Javascript">
function doSum()
{
var a = document.getElementsByName("a").value;
var b = document.getElementsByName("b").value;
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
Извините за этот вопрос noob, но что я делаю неправильно?
Спасибо за любую помощь!
Ответы
Ответ 1
Дайте id
вашим входам и однозначно определите их, используя document.getElementById
. Затем получите их десятичные значения int с помощью parseInt
с параметром radix, установленным в 10, и отобразите результат, как вы сейчас делаете.
<script type="text/javascript" language="Javascript">
function doSum()
{
var a = parseInt(document.getElementById("a").value, 10);
var b = parseInt(document.getElementById("b").value, 10);
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input type="text" id="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input type="text" id="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
getElementsByName
возвращает список элементов, и вам нужно будет ссылаться на тот, который вы хотите с помощью индекса, даже если список содержит только один элемент.
getElementById
, с другой стороны, возвращает однозначно идентифицированный элемент по его идентификатору.
Ответ 2
используйте getElementById и дайте каждому из них идентификатор. getElementsByName возвращает массив. Кстати, это не плохой вопрос. Это обычная ошибка, которая рассматривается в некотором смысле с помощью jQuery, который имеет дело с завернутыми наборами.
Ответ 3
Поля в JavaScript все строки вам нужно int, также .getElementsByName
возвращает массив, вам, вероятно, нужен первый элемент, поэтому:
var a = parseInt(document.getElementsByName("a")[0].value, 10);
var b = parseInt(document.getElementsByName("b")[0].value, 10);
Ответ 4
getElementsByName
возвращает несколько элементов, следовательно, множественное число Elements
. Вам нужно получить свойство первого найденного элемента:
var a = document.getElementsByName('a')[0].value;
getElementsByName
возвращает NodeList: это набор всех элементов, найденных с этим именем. Это похоже на массив, в котором вы можете использовать числовые индексы (например, [0]
) для доступа к найденным элементам и в том, что существует свойство length
; нет других функций, подобных массиву.
Кроме того, свойство value
всегда будет строкой, если оно установлено. Оператор +
является оператором сложения, когда значения являются числами; если они являются строками, это оператор конкатенации. "1" + "2"
равен "12"
в Javascript. Вы должны использовать parseInt
для преобразования их в числа:
var a = document.getElementsByName('a')[0].value;
a = parseInt(a, 10); // parse as a number in base 10
Ответ 5
getElementsByTagName возвращает node список:
function doSum()
{
var a = document.getElementsByName("a")[0].value;
var b = document.getElementsByName("b")[0].value;
var sum = parseInt(a, 10) + parseInt(b, 10);
document.getElementById("sum").value = sum;
}
Поэтому вам нужно будет его индексировать. Кроме того, для того, чтобы не выполнять строчную последовательность, требуется parseInt с radix 10. Если вы не планируете принимать восьмеричные значения в калькуляторе.
Ответ 6
getElementsByName возвращает массив, который дает неверный тип данных для того, что вы пытаетесь сделать.
попробовать:
function doSum()
{
var a = document.getElementById("a").value;
var b = document.getElementById("b").value;
var sum = a + b;
document.getElementById("sum").value = sum;
}
</script>
<form action="" method="POST">
<br/>a:<br/>
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" />
<br/>b:<br/>
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" />
<br/>Ergebnis<br/>
<input type="text" id='sum' value='' size="50" disabled/>
</form>
Ответ 7
ОК, две проблемы, вы получаете валуры a и b, используя getElementsByName, которое возвращает массив значений (поскольку их может быть много). Используйте getElementsById и введите идентификаторы в HTML.
Также свойства value будут строками, поэтому вам нужно будет преобразовать их в числа, прежде чем делать это.
Ответ 8
a и b - строки так:
function doSum()
{
var a = parseInt(document.getElementsByName("a").value);
var b = parseInt(document.getElementsByName("b").value);
var sum = a + b;
document.getElementById("sum").value = sum;
}