Аргументы функции JavaScript

21 марта 2021, 05:10

Программа рассчитывает калорийность
При клике на чекбоксы срабатывает функция и пишет общую каллорийность и цену.
Я захотел реализовать плавное изменение калорийности и цены без использования jQuery
Я не понимаю, как исправить ошибки js
Я написал функцию esc, у которой есть в коде document.getElementById(num), только дело в том, что num является аргументом функции, а document.getElementById() принимает только строку.
Я пытался сделать строку из аргумента num, но всё равно ничего не получилось.
Возможно ошибка даже в чём-то другом.
Я решил написать сам эту программу, но столкнулся с трудностями, буду рад, если мне поможете :)

Ссылка на codeopen: https://codepen.io/mihail-kamahin/pen/MMqBBo

    <h1>Бургер меню</h1>
    <p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p>
    <hr>
    <h2>Наполнение</h2>
    <p><input type="checkbox" checked data-cost="20" data-kkal="200" class="menu">Котлета</p>
    <p><input type="checkbox" data-cost="12" data-kkal="100" class="menu">Сыр</p>
    <p><input type="checkbox" data-cost="8" data-kkal="50" class="menu">Салат</p>
    <p><input type="checkbox" data-cost="2" data-kkal="20" class="menu">Огурец</p>
    <p><input type="checkbox" data-cost="4" data-kkal="67" class="menu">Помидор</p>
    <hr>
    <h2>Соусы</h2>
    <p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Томатный кетчуп</p>
    <p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Горчица</p>
    <p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Майонез</p>
    <p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Сычуанский соус</p>
    <hr>
    <h3>Итого:</h3>
    <p>
        Каллорийность: <span id="kkal"></span> 
        Цена: <span id="cost"></span>
    </p>

function getResult() {
    var cost = 0;
    var kkal = 0;
    for (var i = 0; i < menu.length; i++) {
        if (menu[i].checked) {
            cost += parseFloat(menu[i].getAttribute('data-cost'));
            kkal += parseFloat(menu[i].getAttribute('data-kkal'));
        }
    }
    esc('cost', cost);
    esc('kkal', kkal);
    function esc(num, costAndKkal) {
        var x1 = 1;
        var x01 = 0.1;
        if (x1 > 0) {
            document.getElementById(num).style.opacity = x1;
            x1 = x1 - 0.1;
            setTimeout(esc, 100);
        } else {
            document.getElementById(num).innerHTML = costAndKkal;
            document.getElementById(num).style.opacity = x01;
            x01 = x01 + 0.1;
            setTimeout(esc, 100);
        }
    }
}
var menu = document.getElementsByClassName('menu');
for (var i = 0; i < menu.length; i++) {
    menu[i].onclick = getResult;
}
getResult();

Answer 1

Есть некоторые косяки, типа если быстро кликать, то дёргается, так как я не подумал о таком баге, но у меня получилось самому реализовать такую штуку:

function getResult() {  
	var cost = 0;  
	var kkal = 0;  
	for (let i = 0; i < menu.length; i++) {  
		if (menu[i].checked) {  
			cost += parseFloat(menu[i].getAttribute('data-cost'));  
			kkal += parseFloat(menu[i].getAttribute('data-kkal'));  
		}  
	}  
	esc('cost', cost);  
	esc('kkal', kkal);  
 
	function esc(num, costAndKkal) { 
		let opac = 1; 
		if (opac != 0) { 
			var timerId = setInterval(function() { 
				opac = (opac * 10 - 0.1 * 10) / 10; 
				document.getElementById(num).style.opacity = opac; 
				if (opac == 0) { 
					clearInterval(timerId); 
					let timerId1 = setInterval(function() { 
						opac = (opac * 10 + 0.1 * 10) / 10; 
						document.getElementById(num).style.opacity = opac; 
						document.getElementById(num).innerHTML = costAndKkal; 
						if (opac == 1) { 
							clearInterval(timerId1); 
						} 
					}, 15); 
				} 
			}, 15); 
		} 
	} 
}  
 
var menu = document.getElementsByClassName('menu');  
for (let i = 0; i < menu.length; i++) {  
	menu[i].onclick = getResult;  
}  
 
getResult();

<h1>Бургер меню</h1> 
	<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" 	class="menu">Булочка</p> 
	<hr> 
	<h2>Наполнение</h2> 
	<p><input type="checkbox" checked data-cost="20" data-kkal="200" class="menu">Котлета</p> 
	<p><input type="checkbox" data-cost="12" data-kkal="100" class="menu">Сыр</p> 
	<p><input type="checkbox" data-cost="8" data-kkal="50" class="menu">Салат</p> 
	<p><input type="checkbox" data-cost="2" data-kkal="20" class="menu">Огурец</p> 
	<p><input type="checkbox" data-cost="4" data-kkal="67" class="menu">Помидор</p> 
	<hr> 
	<h2>Соусы</h2> 
	<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Томатный кетчуп</p> 
	<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Горчица</p> 
	<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Майонез</p> 
	<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Сычуанский соус</p> 
	<hr> 
	<h3>Итого:</h3> 
	<p> 
		Каллорийность: <span id="kkal"></span>  
  		Цена: <span id="cost"></span> 
  	</p>

Answer 2

var opac = 0, 
  cost = 30, 
  kkal = 275; 
 
document.addEventListener('click', () => { 
  var target = event.target; 
 
  if (!target.classList.contains('menu')) return; 
 
  if (target.checked) { 
    cost += parseFloat(target.getAttribute('data-cost')); 
    kkal += parseFloat(target.getAttribute('data-kkal')); 
  } else { 
    cost -= parseFloat(target.getAttribute('data-cost')); 
    kkal -= parseFloat(target.getAttribute('data-kkal')); 
  } 
 
  document.getElementById('kkal').innerHTML = kkal; 
  document.getElementById('cost').innerHTML = cost; 
 
  var run = setInterval(() => { 
    opac += 0.1 
    document.querySelector('.end').style.opacity = opac; 
 
    if (opac >= 1) { 
      clearInterval(run); 
    } 
  }, 100) 
})

.end { 
  opacity: 0; 
}

<h1>Бургер меню</h1> 
<p><input type="checkbox" checked disabled data-cost="10" data-kkal="75" class="menu">Булочка</p> 
<hr> 
<h2>Наполнение</h2> 
<p><input type="checkbox" checked data-cost="20" data-kkal="200" class="menu">Котлета</p> 
<p><input type="checkbox" data-cost="12" data-kkal="100" class="menu">Сыр</p> 
<p><input type="checkbox" data-cost="8" data-kkal="50" class="menu">Салат</p> 
<p><input type="checkbox" data-cost="2" data-kkal="20" class="menu">Огурец</p> 
<p><input type="checkbox" data-cost="4" data-kkal="67" class="menu">Помидор</p> 
<hr> 
<h2>Соусы</h2> 
<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Томатный кетчуп</p> 
<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Горчица</p> 
<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Майонез</p> 
<p><input type="checkbox" data-cost="5" data-kkal="10" class="menu">Сычуанский соус</p> 
<hr> 
<h3>Итого:</h3> 
<p class='end'> 
  Калорийность: <span id="kkal"></span> Цена: <span id="cost"></span> 
</p>

Немного переделал ваш код