Показать сообщение отдельно
  #11 (permalink)  
Старый 03.01.2017, 23:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Простой калькулятор с процентами
admiral,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
window.addEventListener("DOMContentLoaded", function() {
    var form = document.querySelector("#main"),
        res = document.querySelector("#res"),
        data = {
            text1: 25,
            text2: 50,
            checkbox2: 10
        },
        percent = {
            checkbox1: .25
        };

    function collect(data, init) {
        return Object.keys(data).reduce(function(sum, id) {
            var elem = document.getElementById(id);
            var key = elem.type == "text" ? elem.value.trim() : elem.checked;
            return key ? sum + data[id] : sum
        }, init)
    }

    function calc() {
        res.innerHTML = (collect(data, 0) * collect(percent, 1)).toFixed(2)
    }
    form.addEventListener("change",calc, false);
    form.addEventListener("input", calc, false)
});
  </script>
</head>

<body>
<form action="http://" id="main">
<input type="text" id="text1"/>
<input type="text" id="text2"/>
и пару чекбоксов
<label><input type="checkbox" id="checkbox1"/> 25%</label>
<input type="checkbox" id="checkbox2"/>
</form>
<div id="res"></div>
</body>
</html>
Ответить с цитированием