Основное математическое текстовое поле Javascript

привет, я новичок и изучаю javascript.

Пытаюсь сделать программу добавления через текстовое поле.

Проверьте html-код на скрипте js http://jsfiddle.net/fCXMt/.

Что мне нужно знать, так это то, как я могу принимать пользовательский ввод в текстовом поле и отображать вывод в теге P.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>untitled</title>
</head>
<body>
<input id="value1" type="text" />
<span> + </span>
<input id="value2" type="text" />
<input type="submit" onclick="output();">
<p id="result"> </p>

<script type="text/javascript" language="javascript" charset="utf-8">
var value1 = document.getElementById('value1').innerHTML;
var value2 = document.getElementById('value2').innerHTML;

function output(){
    document.getElementById('result').innerHTML = value1 + value2;
}

</script>
</body>
</html>

javascript html css math addition
person kevvvin    schedule 18.06.2011    source источник

Ответы (6)


arrow_upward
2
arrow_downward

Свойство для получения значения текстового поля — value, а не innerHTML, поэтому измените их, и вам также нужно будет использовать eval или parseInt для значений текстового поля, иначе они будут объединены в строки.

Кроме того, вам нужно переместить объявления переменных внутри функции, чтобы при вызове функции извлекались текущие значения из текстовых полей.

См. скрипт обновления здесь.

person James Allardice    schedule 18.06.2011
comment
это сработало спасибо. - person MindRoasterMir; 07.05.2021

arrow_upward
3
arrow_downward

Вы должны получить значения в полях ввода после нажатия кнопки и использовать для этого свойство value (не innerHTML). Кроме того, убедитесь, что вы добавляете числа, а не добавляете строки вместе. Попробуй это:

function output(){
    var value1 = document.getElementById('value1').value;
    var value2 = document.getElementById('value2').value;

    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
person Kon    schedule 18.06.2011

arrow_upward
1
arrow_downward

Вам нужно получить доступ к свойству «значение» полей ввода и проанализировать их как целые числа:

var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
person jbachman    schedule 18.06.2011

arrow_upward
1
arrow_downward

Вы читаете значения только один раз, вы должны прочитать их в функции вывода; Вам также необходимо разобрать их на целые числа, поскольку 1+4 станет 14, если вы используете строки. Могло бы быть лучше, но это должно работать.

<script type="text/javascript" language="javascript" charset="utf-8">

function output(){
    var value1 = parseInt(document.getElementById('value1').value);
    var value2 = parseInt(document.getElementById('value2').value);
    document.getElementById('result').innerHTML = value1 + value2;
}

</script>
person fijter    schedule 18.06.2011

arrow_upward
1
arrow_downward

Для полноты: ваш сценарий мог бы быть лучше. На основе вашей формы я приготовил еще один пример jsfiddle.

person KooiInc    schedule 18.06.2011

arrow_upward
0
arrow_downward

При получении значения просто умножьте его на 1, оно будет анализировать значение в число

const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;
person Rushikesh Bharad    schedule 30.03.2018