Форум

CryNet · #1 (**permalink**) 02.01.2019, 23:51

Необходимо повесить функцию на событие 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;
}

рони · #2 (**permalink**) 03.01.2019, 00:01

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;
}
});

CryNet · #3 (**permalink**) 03.01.2019, 00:27

О, спасибо. Ещё один маленький вопрос
У меня есть уже выбранные 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();

И достаточно было просто вызвать функцию. В вашей же реализации такое не прокатывает.

рони · #4 (**permalink**) 03.01.2019, 01:42

Сообщение от 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 (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>

рони · #5 (**permalink**) 03.01.2019, 01:46

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>

CryNet · #6 (**permalink**) 03.01.2019, 01:58

А, я понял почему у меня не вышло. Спасибо

Форум

Справочник

Discord чат

Курсы javascript