Как привязать onClick к кнопкам?

@Дмитрий Дмитрий · Регистрация: 17.09.2016

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

В js "чайник", изучаю на ходу.
Суть проблемы: есть форма name="Form1", на ней два поля ввода чисел, id="Editbox1" name="1" и id="Editbox2" name="2", которые мы умножаем и результат выводим в третье поле на этой же форме id="result" name="3", используя формулы

JavaScript
1
2
result *= parseFloat(document.getElementById('Editbox1').value);
result *= parseFloat(document.getElementById('Editbox2').value);

Проблема вот в чем. на форме есть много изображений-кнопок, каждое имеет определенное числовое значение value="" при нажатии на эту кнопку присвоенное число должно умножаться на поле id="result" name="3" с выводом результата в этом поле.
Пробывал присваивать кнопкам одно имя и умножать

JavaScript
1
result *= parseFloat(document.getElementByName('na').value);

результата нет, не могу понять как привязать onclick к кнопкам, видимо тут проблема?

@Дмитрий Дмитрий · 17.09.2016, 10:55 **[ТС]**

Где-то тут ошибка
Где то тут ошибка, а где не понимаю.Три дня уже сижу.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function changeText0()
{
var Editbox1 = document.getElementById('Editbox1').value; //выцепляем значение value первого вводимого поля
var Editbox2 = document.getElementById('Editbox2').value; //выцепляем значение value второго вводимого поля
var result = Editbox1 * Editbox2
document.getElementById('result').innerHTML = result.toFixed(2);
var button = document.getElementsByName('la'); //определяем какой из пунктов выбран и запоминаем его value в переменную button
button = []; // задаем пустой массив button
if (buttons[i].type == "button" && buttons[i]) 
button[button.length] = buttons[i].value;   
var result = result * button
document.getElementById('result').innerHTML = result.toFixed(2);

Добавлено через 56 секунд
Кнопки имеют следующий код

HTML5
1
<button id="AdvancedButton1" onclick="changeText0()" type="button" style="position:absolute;" name="la" value="500">

@mrtoxas · 17.09.2016, 11:41

1. Зачем вам form? Вы куда-то отправляете эти данные?
2. var button = document.getElementsByName('la'); //определяем какой из пунктов выбран.
Этим мы ничего не определяем, а получаем список элементов с name="la", которые находятся на странице.
3. button = []; - этим вы удаляете то, что нашли в предыдущем пункте.
Исходя из пункта 3, дальнейшие действия лишены смысла.

@Дмитрий Дмитрий · 17.09.2016, 11:50 **[ТС]**

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
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">
<script>
 function changeText0()
{
var Editbox1 = document.getElementById('Editbox1').value; //выцепляем значение value первого вводимого поля
var Editbox2 = document.getElementById('Editbox2').value; //выцепляем значение value второго вводимого поля
var result = Editbox1 * Editbox2
 document.getElementById('result').innerHTML = result.toFixed(2);
var button = document.getElementsByName('la'); //определяем какой из пунктов выбран и запоминаем его value в переменную button
        button = []; // задаем пустой массив button
            if (buttons[i].type == "button" && buttons[i]) 
            button[button.length] = buttons[i].value;
    var result = result * button
        document.getElementById('result').innerHTML = result.toFixed(2);
}       
</script>
</head>
<body>
<form name="Form1" method="post" action="" enctype="text/plain" id="Form1" onsubmit="return ValidateForm1(this)" oninput="changeText0()">
<input type="number" id="Editbox1" style="position:absolute;" name="1" value="0.4">
<input type="number" id="Editbox2" style="position:absolute; name="2" value="0.4">
<button id="AdvancedButton1" onclick="changeText0()" type="button" style="position:absolute;" name="la" value="500">
</button>
<button id="AdvancedButton2" onclick="changeText0()" type="button" style="position:absolute;" name="la" value="400">
</button>
<output type="text" id="result" style="position:absolute;left:810px;top:200px;width:75px;height:24px;line-height:24px;z-index:30;" name="Стоимость" value="" readonly autocomplete="off">
</form>
</div>
</body>
</html>

Добавлено через 1 минуту
Убрать пустой массив button?

@mrtoxas · 17.09.2016, 12:50

И массив убрать, и все после 14й строки. Потому что, вы там налепили непонятно откуда и непонятно что. Да и в HTML ошибки - незакрытые скобки. И <output> лучше не использовать. И еще много чего
В общем, разбирайтесь:

HTML5
1
2
3
4
5
6
7
<div class="form">
<input type="number" id="editbox1" value="1.4" />
<input type="number" id="editbox2" value="1.4" />
<button onclick="myFunc(this)" value="500">500</button>
<button onclick="myFunc(this)" value="100">100</button>
<span id="results"></span>
</div>

JavaScript
1
2
3
4
5
6
7
function myFunc(thisButton){
 var edit1 = +document.getElementById('editbox1').value;
 var edit2 = +document.getElementById('editbox2').value; 
 var buttonValue = +thisButton.value;
 var results = document.getElementById('results');
 results.innerHTML = edit1+edit2+buttonValue;
};

@Дмитрий Дмитрий · 17.09.2016, 13:32 **[ТС]**

В js поле 2,3 и 4 вашего знак + это плюс? У меня то умножение везде.
В html в поле 1 и 2 не заданы name, они не нужны?
Форму я убрал, class="form" остается?

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

JavaScript
1
2
3
4
5
6
7
function myFunc(thisButton){
 var Editbox1 = *document.getElementById('Editbox1').value;
 var Editbox1 = *document.getElementById('Editbox2').value; 
 var buttonValue = *thisButton.value;
 var result = document.getElementById('result');
 result.innerHTML = Editbox1*Editbox2*buttonValue;
}

Так правильно будет?

@mrtoxas · 17.09.2016, 13:36

Плюсом приводим строку к числовому типу.
В 6й строке можете использовать умножение.
В name и <form> неоходимости нет, если данные формы никуда не отправляете.

@Дмитрий Дмитрий · 17.09.2016, 13:43 **[ТС]**

JavaScript
1
2
3
4
5
6
7
function myFunc(thisButton){
 var Editbox1 = +document.getElementById('Editbox1').value;
 var Editbox1 = +document.getElementById('Editbox2').value; 
 var buttonValue = +thisButton.value;
 var result = document.getElementById('result');
 result.innerHTML = Editbox1*Editbox2*buttonValue;
};

Заменил output на span
<span type="number" id="result">

Выдает ошибку NaN

@mrtoxas · 17.09.2016, 15:02

html покажите

@Дмитрий Дмитрий · 17.09.2016, 17:01 **[ТС]**

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

HTML5
1
2
3
4
5
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta charset="utf-8">

JavaScript
1
2
3
4
5
6
7
8
9
<script>
function myFunc(thisButton){
 var Editbox1 = +document.getElementById('Editbox1').value;
 var Editbox1 = +document.getElementById('Editbox2').value; 
 var buttonValue = +thisButton.value;
 var result = document.getElementById('result');
 result.innerHTML = Editbox1*Editbox2*buttonValue;
};
</script>

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
</head>
<body>
<div id="container">
<div id="wb_Shape20" style="position:absolute;left:36px;top:387px;width:1130px;height:476px;filter:alpha(opacity=95);opacity:0.95;z-index:10;">
<img src="https://www.cyberforum.ru/images/img0459.png" id="Shape20" alt="Расчет стоимости изделия" title="Расчет стоимости изделия" style="width:1130px;height:476px;"></div>
<div id="wb_MasterObjects1" style="position:absolute;left:17px;top:0px;width:1168px;height:236px;z-index:11;">
<div id="wb_Shape3" style="position:absolute;left:44px;top:18px;width:209px;height:119px;z-index:0;">
<img src="https://www.cyberforum.ru/images/img0003.png" id="Shape3" alt="" style="width:209px;height:119px;"></div>
<div id="wb_Shape2" style="position:absolute;left:991px;top:18px;width:169px;height:117px;z-index:1;">
<img src="https://www.cyberforum.ru/images/img0005.png" id="Shape2" alt="" style="width:169px;height:117px;"></div>
<div id="wb_TextMenu2" style="position:absolute;left:1007px;top:35px;width:138px;height:98px;text-align:center;z-index:2;">
<span><a href="./index.html" class="style1" title="О Компании">О Компании</a></span>
<span><a href="./contact.html" class="style1" title="Контакты">Контакты</a></span>
<span><a href="./foto.html" class="style1" title="Галерея">Галерея</a></span>
</div>
<input type="number" id="Editbox1" style="position:absolute;left:288px;top:569px;width:75px;height:24px;line-height:24px;z-index:16;" name="Ширина изделия" value="0.4" autocomplete="off" title="Ширина изделия, мм">
<div id="wb_Text12" style="position:absolute;left:234px;top:537px;width:197px;height:24px;z-index:17;text-align:left;">
<span style="color:#006400;font-family:'Times New Roman';font-size:21px;"><strong></strong></span></div>
<input type="number" id="Editbox2" style="position:absolute;left:546px;top:569px;width:75px;height:24px;line-height:24px;z-index:18;" name="Высота изделия" value="0.4" title="Высота изделия, мм">
<div id="wb_Text13" style="position:absolute;left:494px;top:537px;width:193px;height:24px;z-index:19;text-align:left;">
<span style="color:#006400;font-family:'Times New Roman';font-size:21px;"><strong></strong></span></div>
<span type="number" id="result" style="position:absolute;left:829px;top:569px;width:75px;height:24px;line-height:24px;z-index:20;" name="Стоимость" value="" readonly autocomplete="off"></span>
<div id="wb_Text14" style="position:absolute;left:746px;top:537px;width:243px;height:24px;z-index:21;text-align:left;">
<span style="color:#006400;font-family:'Times New Roman';font-size:21px;"><strong></strong></span></div>
<button id="AdvancedButton1" onclick="myFunc(this)" type="button" style="position:absolute;left:85px;top:731px;width:139px;height:67px;z-index:22;" name="la" value="500">
<div style="text-align:center">&nbsp;</div>
</button>
<div id="wb_Text15" style="position:absolute;left:493px;top:650px;width:214px;height:32px;z-index:23;text-align:left;">
<span style="color:#0000CD;font-family:'Times New Roman';font-size:29px;"><strong></strong></span></div>
<button id="AdvancedButton2" onclick="myFunc(this)" type="button" style="position:absolute;left:238px;top:731px;width:139px;height:67px;z-index:24;" name="la" value="400">
<div style="text-align:center">&nbsp;</div>
</button>
</div>
</body>
</html>

@mrtoxas · 17.09.2016, 17:29

Ошибка в определении переменных:
var Editbox1 = ...
var Editbox1 = ...
И не начинайте наимeнование переменных, классов и всего прочего с заглавной буквы.

@Дмитрий Дмитрий · 17.09.2016, 18:55 **[ТС]**

Огромнейшее спасибо!!!

Теперь правда код document.getElementById('result').innerH TML = result.toFixed(2); по запятой не работает?

@mrtoxas · 17.09.2016, 20:26

JavaScript
1
results.innerHTML = (edit1+edit2+buttonValue).toFixed(2);

@Дмитрий Дмитрий · 18.09.2016, 06:19 **[ТС]**

ты гений

@Дмитрий Дмитрий · 20.09.2016, 09:34 **[ТС]**

Подскажите, как написать условие для editbox1, чтобы вводимые числа небыли меньше 0,4 но не больше 4? а так же ввод только положительных чисел, без "-"?.

JavaScript
1
2
3
4
5
6
7
8
9
<script>
function myFunc(thisButton){
 var editbox1 = +document.getElementById('editbox1').value >= 0.4;
 var editbox2 = +document.getElementById('editbox2').value >=0.4; 
 var buttonValue = +thisButton.value;
 var wb_result = document.getElementById('wb_result');
 wb_result.innerHTML = (editbox1*editbox2*buttonValue).toFixed(2);
 };
</script>

@Дмитрий Дмитрий · 22.09.2016, 08:37 **[ТС]**

Если видов кнопок несколько? т.е. код var buttonValue = +thisButton.value; учитывает все кнопки и умножает на buttonValue, а если необходимо умножить три или четыре кнопки?

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита табличной части. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.09.2016, 11:41
	1. Зачем вам form? Вы куда-то отправляете эти данные? 2. var button = document.getElementsByName('la'); //определяем какой из пунктов выбран. Этим мы ничего не определяем, а получаем список элементов с name="la", которые находятся на странице. 3. button = []; - этим вы удаляете то, что нашли в предыдущем пункте. Исходя из пункта 3, дальнейшие действия лишены смысла. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.09.2016, 13:36
	Плюсом приводим строку к числовому типу. В 6й строке можете использовать умножение. В name и <form> неоходимости нет, если данные формы никуда не отправляете. 1

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.09.2016, 15:02
	html покажите 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	17.09.2016, 17:29
	Сообщение было отмечено Дмитрий Дмитрий как решение Решение Ошибка в определении переменных: var Editbox1 = ... var Editbox1 = ... И не начинайте наимeнование переменных, классов и всего прочего с заглавной буквы. 1

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	17.09.2016, 18:55 [ТС]
	Огромнейшее спасибо!!! Теперь правда код document.getElementById('result').innerH TML = result.toFixed(2); по запятой не работает? 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	18.09.2016, 06:19 [ТС]
	ты гений 0

@Дмитрий Дмитрий 1 / 1 / 2 Регистрация: 17.09.2016 Сообщений: 450
	22.09.2016, 08:37 [ТС]
	Если видов кнопок несколько? т.е. код var buttonValue = +thisButton.value; учитывает все кнопки и умножает на buttonValue, а если необходимо умножить три или четыре кнопки? 0

Как привязать onClick к кнопкам?

Решение

Решение

Решение