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

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

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

Вот код:

PHP/HTML

<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").onclick=add; ?

Вот код:

HTML5

<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

<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

<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;-не работает

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

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

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

@TVPNERO -26 / 8 / 12 Регистрация: 29.03.2016 Сообщений: 1,154
	25.05.2016, 12:24 [ТС]	6
	и еще-а как проверить ? я только начал изучать джаву скрипт и(базовый джава скрипт и клиентский джава скрипт),и думал что среда разработки это текстовый редактор а не консоль. Насколько я знаю данные которые отправляются через форму попадают на сервер и обрабатываются программой написаной на PHP. Для создания данной веб страницы(по сути веб-приложение) я думал можно обойтись только скриптом(так как сохранять на сервере данные не требуется) . Задача была сделать страницу которая подсчитывала суму двух чисел,ведь клиентского джава скрипт достаточно? или для такой задачи нужно все же знать серверный джава скрипт? Добавлено через 2 минуты Сообщение от kalabuni ff.value +ss.value, Я так понимаю value выступает тут в роли свойства обьектов ff и ss верно? Добавлено через 2 минуты value это свойство обьекта ff? 0

@kalabuni супермизантроп 3935 / 2974 / 691 Регистрация: 18.04.2012 Сообщений: 8,623
	25.05.2016, 12:33	7
	Сообщение от TVPNERO value это свойство обьекта ff? с точки зрения HTML value -- это атрибут HTML-тега, с точки зрения javascript'a value -- это свойство объекта и ссылка ff.value вернёт значение этого свойства 0

@mixail09 55 / 22 / 10 Регистрация: 18.05.2016 Сообщений: 89
	25.05.2016, 12:48	9
	"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	11
	https://jsfiddle.net/sL9xbfo7/ Вот так. Да и </input> - закрывающий тэг не нужен 0

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

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

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

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

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

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

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

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

Решение