Базовое текстовое поле Javascript - PullRequest
Новая
       18

Базовое текстовое поле Javascript

2 голосов
/ 18 июня 2011

Привет, я новичок в изучении javascript.

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

Проверьте HTML-код на js fiddle 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>

Ответы [ 6 ]

3 голосов
/ 18 июня 2011

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

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

    document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
1 голос
/ 18 июня 2011

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

1 голос
/ 18 июня 2011

Вы читаете значения только один раз, вы должны прочитать их в функции вывода;Вам нужно также разобрать их на целые числа, поскольку 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>
1 голос
/ 18 июня 2011

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

var value1 = parseInt(document.getElementById('value1').value);
var value2 = parseInt(document.getElementById('value2').value);
1 голос
/ 18 июня 2011

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

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

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

0 голосов
/ 30 марта 2018

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

const value1 = document.getElementById('value1').innerHTML.value * 1;
const value2 = document.getElementById('value2').innerHTML.value * 1;
document.getElementById('result').innerHTML = value1 + value2;
...