Простая форма веб-форма для сложения двух чисел не работает

@TVPNERO · Регистрация: 29.03.2016

Студворк — интернет-сервис помощи студентам

Не работает скрипт для подсчета сложения.Может я неправильно привязал обработчик события(клик на кнопку подсчитать)?

Вот код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
<head>
        <title>Приложение сложения</title>
<meta charset="utf-8">
 
<script type="text/javascript">
 
 
function add(){
 
var ff=document.getElementById("num1");
var ss=document.getElementById("num2");
var action=document.getElementById("end");
 
 
function addin(ff,ss){
 
return ff+ss;
};
 
 
};  
  var res=document.getElementById("end").onclick=add;
 
</script>
 
</head>
 
 
<body style="white-space:pre">
<h1>форма для сложения чисел</h1>
<form>
 
 Укажите первое число:<input type="text" id="num1"  size="5" placeholder="number"></input>
 
Укажите второе число:<input type="text" id="num2"  size="5"></input>
<button id="end">Посчитать!!</button>
 
 
Результат:<input type="text" id="result"  size="5"></input>
 
</form>
 
 
</body>
 
</html>

@mixail09 · 25.05.2016, 10:33

Value из формы посылается на сервер

А вот так var ff=document.getElementById("num1"); вы получаете не значение из инпута, а [object HTMLInputElement]
(можете через консоль проверить).
Т.Е. ff+ss получается [object HTMLInputElement] + [object HTMLInputElement],

@TVPNERO · 25.05.2016, 12:11 **[ТС]**

а как тогда получить значение из импута?

@Hikari · 25.05.2016, 12:15

Вот так:

JavaScript
1
var ff=document.getElementById("num1").value;

@kalabuni · 25.05.2016, 12:19

вы не числа складываете
своей инструкцией ff+ss вы пытаетесь сложить два тега, чего сделать в принципе невозможно -- складывать можно значения тегов
но даже если вы попытаетесь сложить значения тегов -- ff.value +ss.value, то и тут вы не получите желаемого результата, потому что значение value -- это всегда строка (тип string)
сложение двух строк через оператор + приведёт к их конкатенации (к склеиванию в одну строку)
для получения арифметической суммы сначала обе строки надо преобразовать в числа

окончательно return +ff.value + +ss.value;

@TVPNERO · 25.05.2016, 12:24 **[ТС]**

и еще-а как проверить ?
я только начал изучать джаву скрипт и(базовый джава скрипт и клиентский джава скрипт),и думал что среда разработки это текстовый редактор а не консоль.

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

Для создания данной веб страницы(по сути веб-приложение) я думал можно обойтись только скриптом(так как сохранять на сервере данные не требуется) .

Задача была сделать страницу которая подсчитывала суму двух чисел,ведь клиентского джава скрипт достаточно? или для такой задачи нужно все же знать серверный джава скрипт?

Добавлено через 2 минуты

Сообщение от kalabuni

ff.value +ss.value,

Я так понимаю value выступает тут в роли свойства обьектов ff и ss верно?

Добавлено через 2 минуты
value это свойство обьекта ff?

@kalabuni · 25.05.2016, 12:33

Сообщение от TVPNERO

value это свойство обьекта ff?

с точки зрения HTML value -- это атрибут HTML-тега,
с точки зрения javascript'a value -- это свойство объекта и ссылка ff.value вернёт значение этого свойства

@TVPNERO · 25.05.2016, 12:37 **[ТС]**

Попробовал вот так но не получается.Результат не производится.Может я неверно вызываю функцию в троку результата-var res=document.getElementById("end").oncli ck=add; ?

Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
        <title>Приложение сложения</title>
<meta charset="utf-8">  
<script type="text/javascript">
 
 
function add(){
 
var ff=document.getElementById("num1");
var ss=document.getElementById("num2");
var action=document.getElementById("end");
 
 
function addin(ff,ss){
 
return +ff.value+ +ss.value;
};
 
 
};  
  var res=document.getElementById("end").onclick=add;
 
</script>
 
 
 
 
 
</head>
 
 
<body style="white-space:pre">
<h1>форма для сложения чисел</h1>
<form>
 
 Укажите первое число:<input type="text" id="num1"  size="5" placeholder="number"></input>
 
Укажите второе число:<input type="text" id="num2"  size="5"></input>
<button id="end">Посчитать!!</button>
 
 
Результат:<input type="text" id="result"  size="5"></input>
 
</form>
 
 
</body>
 
</html>

@mixail09 · 25.05.2016, 12:48

"value это свойство обьекта ff?"

Да в данном случае это св-во объекта.

Но как говорили выше, вот так "ff.value +ss.value" верный ответ все равно не получишь, нужно значения привести из строк в число. (см. что пишет "kalabuni")

https://jsfiddle.net/n0kbuh87/
как то так

@TVPNERO · 25.05.2016, 13:15 **[ТС]**

вот переписал точка в точку.но результат в строку резулбтата не появляется

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html>
<head>
        <title>Приложение сложения</title>
<meta charset="utf-8">  
<script type="text/javascript">
 
 
var ff=document.getElementById("num1");
var ss=document.getElementById("num2");
var action=document.getElementById("end")
 
 action.onclick=function(){
    var x=+ff.value+ +ss.value;
    alert(x)
 }
 
 
 
</script>
 
</head>
 
 
<body style="white-space:pre">
<h1>форма для сложения чисел</h1>
<form>
 
 Укажите первое число:<input type="text" id="num1"  size="5" placeholder="number"></input>
 
Укажите второе число:<input type="text" id="num2"  size="5"></input>
<input type="submit" id="end" value="посчитать!!"></input>
 
 
Результат:<input type="text" id="result"  size="5"></input>
 
</form>
 
 
</body>
 
</html>

Добавлено через 5 минут
о есть код вроде правильный но в строку результата подсчет не лезет.

@mixail09 · 25.05.2016, 13:46

https://jsfiddle.net/sL9xbfo7/
Вот так.

Да и </input> - закрывающий тэг не нужен

@TVPNERO · 25.05.2016, 14:15 **[ТС]**

А можно весь код на тут на форуме для меня оставить?
я попробовал но не получилось даже алерт не срабатівает.

вот мой код как Вы предложили:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<head>
        <title>Приложение сложения</title>
<meta charset="utf-8">  
<script type="text/javascript">
var ff=document.getElementById("num1");
var ss=document.getElementById("num2");
 var action=document.getElementById("end");
  var res=document.getElementById("result");
 
 action.onclick=function(){
    var res=document.getElementById("result");
    var x=+ff.value+ +ss.value;
    alert(x);
     res.setAttribute("value", x);
    }
 
</script>
 
</head>
 
<body style="white-space:pre">
<h1>форма для сложения чисел</h1>
<form>
 
 Укажите первое число:<input type="text" id="num1"  size="5" placeholder="number"></input>
 
Укажите второе число:<input type="text" id="num2"  size="5"></input>
<input type="submit" id="end" value="посчитать!!"></input>
 
 
Результат:<input type="text" id="result"  size="5"></input>
 
</form>
 
 
</body>
 
</html>

@mixail09 · 25.05.2016, 14:24

Скорее всего нужно просто скрипт вставить после элементов формы (перед закрывающим тэгом </body>)
А то получается что скрипт срабатывает, а DOM элементы еще не загрузились

@TVPNERO · 25.05.2016, 14:32 **[ТС]**

Урааааа!теперь получилось .Спасибо.
Даже не знал что скрипт можно вставлять в разделе body.

Только результат появляется в строке результата и сразу исчезает,почему?

@mixail09 · 25.05.2016, 14:38

<input type="submit" id="end" value="посчитать!!">
эта кнопка перезагружает страницу

попробуй заменить ее на <div id="end">посчитать<div>
только чтобы div красивый был добавить ему стилей cursor: pointer

@TVPNERO · 25.05.2016, 14:44 **[ТС]**

Мои благодарности.Все получилось.
кстати не знаете еще какие то хорошие книги по джава скрипт .кроме девида фленнигана?

@mixail09 · 25.05.2016, 14:48

https://learn.javascript.ru/
Мне очень понравился ресурс. Огромный плюс, что есть практика.

@TVPNERO · 25.05.2016, 17:46 **[ТС]**

да.да практика то что мне необходимо.

Добавлено через 2 часа 25 минут
А вот я еще попробовал изменить способ получения результата на-

JavaScript
1
2
var x=+ff.value+ +ss.value;
     res.value=x.value;// получение результата вместо строки res.setAttribute("value", x)

но строка результата відает-undefined.Почему?

И как еще можно заменить строку-res.setAttribute("value", x); ?

я даже пробовал-res=x но не работает.

@mixail09 · 25.05.2016, 17:57

res.value=x.value
А почему x.value а не просто x?

Должно работать.

@TVPNERO · 25.05.2016, 18:02 **[ТС]**

да сработало.

а просто res=x;-не работает

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 10:33
	Value из формы посылается на сервер А вот так var ff=document.getElementById("num1"); вы получаете не значение из инпута, а [object HTMLInputElement] (можете через консоль проверить). Т.Е. ff+ss получается [object HTMLInputElement] + [object HTMLInputElement], 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	25.05.2016, 12:11 [ТС]
	а как тогда получить значение из импута? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	25.05.2016, 12:19
	вы не числа складываете своей инструкцией ff+ss вы пытаетесь сложить два тега, чего сделать в принципе невозможно -- складывать можно значения тегов но даже если вы попытаетесь сложить значения тегов -- ff.value +ss.value, то и тут вы не получите желаемого результата, потому что значение value -- это всегда строка (тип string) сложение двух строк через оператор + приведёт к их конкатенации (к склеиванию в одну строку) для получения арифметической суммы сначала обе строки надо преобразовать в числа окончательно return +ff.value + +ss.value; 1

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 12:48
	"value это свойство обьекта ff?" Да в данном случае это св-во объекта. Но как говорили выше, вот так "ff.value +ss.value" верный ответ все равно не получишь, нужно значения привести из строк в число. (см. что пишет "kalabuni") https://jsfiddle.net/n0kbuh87/ как то так 0

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 13:46
	https://jsfiddle.net/sL9xbfo7/ Вот так. Да и </input> - закрывающий тэг не нужен 0

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 14:24
	Сообщение было отмечено TVPNERO как решение Решение Скорее всего нужно просто скрипт вставить после элементов формы (перед закрывающим тэгом </body>) А то получается что скрипт срабатывает, а DOM элементы еще не загрузились 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	25.05.2016, 14:32 [ТС]
	Урааааа!теперь получилось .Спасибо. Даже не знал что скрипт можно вставлять в разделе body. Только результат появляется в строке результата и сразу исчезает,почему? 0

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 14:38
	<input type="submit" id="end" value="посчитать!!"> эта кнопка перезагружает страницу попробуй заменить ее на <div id="end">посчитать<div> только чтобы div красивый был добавить ему стилей cursor: pointer 0

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	25.05.2016, 14:44 [ТС]
	Мои благодарности.Все получилось. кстати не знаете еще какие то хорошие книги по джава скрипт .кроме девида фленнигана? 0

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 14:48
	https://learn.javascript.ru/ Мне очень понравился ресурс. Огромный плюс, что есть практика. 1

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 17:57
	res.value=x.value А почему x.value а не просто x? Должно работать. 1

@TVPNERO 9 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	25.05.2016, 18:02 [ТС]
	да сработало. а просто res=x;-не работает 0

Простая форма веб-форма для сложения двух чисел не работает

Решение