Автосумма в HTML

Question

Автосумма в HTML

Mister X Мыслитель (5463), на голосовании 1 неделю назад

Доброго времени суток!
Имеется типа калкулятора написанный на HTML
Нужно создать копию, а точнее что бы на странице появилось еще четыре таких же калькулятора работающих независимо друг от друга

 <!DOCTYPE html>  
<html lang="ru">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Калькулятор</title>  
    <script>  
        function calculate() {  
            const inputs = document.querySelectorAll('.input-field');  
            let sum = 0;  
            let count = 0;  
 
            inputs.forEach(input => {  
                const value = parseFloat(input.value);  
                if (!isNaN(value)) {  
                    sum += value;  
                    count++;  
                }  
            });  
 
            const average = count > 0 ? sum / count : 0;  
            const halfAverage = average / 2;  
            const halfSum = sum / 2;  
 
            document.getElementById('sum').innerText = 'Сумма: ' + sum;  
            document.getElementById('average').innerText = 'Среднее: ' + average;  
            document.getElementById('halfAverage').innerText = 'Половина среднего: ' + halfAverage;  
            document.getElementById('halfSum').innerText = 'Половина суммы: ' + halfSum;  
        }  
    </script>  
</head>  
<body>  
    <h1>Калькулятор значений</h1>  
    <div>  
        <input type="text" class="input-field" oninput="calculate()">  
        <input type="text" class="input-field" oninput="calculate()">  
        <input type="text" class="input-field" oninput="calculate()">  
		 
	</div>	 
        <input type="text" class="input-field" oninput="calculate()">  
        <input type="text" class="input-field" oninput="calculate()">  
        <!-- Добавьте дополнительные поля ввода по мере необходимости -->  
     
    <div> 
        <p id="sum">Сумма: 0</p>  
        <p id="average">Среднее: 0</p>  
        <p id="halfAverage">Половина среднего: 0</p>  
        <p id="halfSum">Половина суммы: 0</p>  
		  </div> 
</body>  
</html>

пробовал и так и так изменять названия, функцию, но без знания все четно.
тыкните что и где изменить (типа к предыдущему названию добавить номер)?

Answer 1

___ Искусственный Интеллект (880545) 1 месяц назад

Нужно 4 отдельных скрипта сделать.
В форме нужно менять все названия

Mister X Мыслитель (5463) 1 месяц назад

значит изменить название функций function calculate на function calculate1 не прокатит?

___ Искусственный Интеллект (880545) Mister X , Должно, но лучше ещё и названия полей заменить, чтобы не путалось

Answer 2

Привет!
Я сделал функцию, которая этот калькулятор пихает в контейнер с указанным ID.

Разметка вышла длинная и в формат ответа не влезает.
Поэтому я залил ее себе на CodePen:
https://codepen.io/ieqlvlox-the-typescripter/pen/KwKRyME

Answer 3

Да без проблем. Вот любое количество таймеров именно с изменение timerId:
https://local-disc.firebaseapp.com/menu/articles/timer.html

Можно и единственным веб-компонентом (shadow DOM) сделать безо всякой нумерации, там: https://codepen.io/VISTASTER/pen/gbOzjWe