Как правильно повесить функцию на событие?
Необходимо повесить функцию на событие onchange на input, но только если у input-а класс menu.
Часть HTML: ... <p><input type="checkbox" checked data-cost="20" data-kkal="200" class="menu">Котлета</p> ... Весь JS:
onchange = function getResult(){
var menu = document.getElementsByClassName('menu');
var cost = 0;
var kkal = 0;
for (let index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += parseFloat(menu[index].getAttribute('data-cost'));
kkal += parseFloat(menu[index].getAttribute('data-kkal'));
}
}
document.getElementById('cost').innerHTML = cost;
document.getElementById('kkal').innerHTML = kkal;
}
|
CryNet,
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementsByClassName('menu');
for (var i = 0; i < menu.length; i++) {
menu[i].addEventListener('change', getResult)
}
function getResult(){
var cost = 0;
var kkal = 0;
for (let index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += parseFloat(menu[index].getAttribute('data-cost'));
kkal += parseFloat(menu[index].getAttribute('data-kkal'));
}
}
document.getElementById('cost').innerHTML = cost;
document.getElementById('kkal').innerHTML = kkal;
}
});
|
О, спасибо. Ещё один маленький вопрос
У меня есть уже выбранные input-ы: <p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p> Как сделать, чтобы при загрузке страницы уже отображалось значение выбранных input-ов? Раньше была немного другая конструкция функции:
function getResult(){
var menu = document.getElementsByClassName('menu');
var cost = 0;
var kkal = 0;
for (let index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += parseFloat(menu[index].getAttribute('data-cost'));
kkal += parseFloat(menu[index].getAttribute('data-kkal'));
}
}
document.getElementById('cost').innerHTML = cost; // значение выводится тут
document.getElementById('kkal').innerHTML = kkal;// и здесь
}
getResult();
И достаточно было просто вызвать функцию. В вашей же реализации такое не прокатывает. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementsByClassName('menu');
for (var i = 0; i < menu.length; i++) {
menu[i].addEventListener('change', getResult)
}
function getResult(){
var cost = 0;
var kkal = 0;
for (let index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += parseFloat(menu[index].getAttribute('data-cost'));
kkal += parseFloat(menu[index].getAttribute('data-kkal'));
}
}
document.getElementById('cost').innerHTML = cost;
document.getElementById('kkal').innerHTML = kkal;
}
getResult();
});
</script>
</head>
<body>
<div id="cost"></div>
<div id="kkal"></div>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
</body>
</html>
|
CryNet,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener('DOMContentLoaded', function() {
var menu = document.getElementsByClassName('menu');
for (var i = 0; i < menu.length; i++) {
menu[i].addEventListener('change', getResult)
}
function getResult(){
var cost = 0;
var kkal = 0;
for (var index = 0; index < menu.length; index++) {
if(menu[index].checked) {
cost += +menu[index].dataset.cost;
kkal += +menu[index].dataset.kkal;
}
}
document.getElementById('cost').innerHTML = cost;
document.getElementById('kkal').innerHTML = kkal;
}
getResult();
});
</script>
</head>
<body>
<div id="cost"></div>
<div id="kkal"></div>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
</body>
</html>
|
А, я понял почему у меня не вышло. Спасибо :)
|
| Часовой пояс GMT +3, время: 03:14. |