ramil_bayramov
@ramil_bayramov
Beginner programmer of HTML,CSS,JS

Как реализовать автоматический подсчет цены на js?

Вот код, ломал голову, но не смог найти
<!DOCTYPE html>
<html>
<head lang="ru">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script>
        window.onload = function () {
            let smallPizza = document.getElementById("smallPizza");
            let mediumPizza = document.getElementById("mediumPizza");
            let largePizza = document.getElementById("largePizza");

            let mashrooms = document.getElementById("mashrooms");
            let becon = document.getElementById("becon");
            let tomatoes = document.getElementById("tomatoes");
            let cheese = document.getElementById("cheese");
            let olives = document.getElementById("olives");

            let pSumma = document.getElementById("pSumma");

            
        }
    </script>
</head>
<body id="body">
    <form action="C:\Users\sds63\Desktop\data.html">
        <!-- <select name="pizza" id="pizza"> 
            <option id="smallPizza" value="5">Small Pizza 5$</option>
            <option id="mediumPizza" value="8">Medium Pizza 8$</option>
            <option id="largePizza" value="12">Large Pizza 12$</option>
        </select><br> -->
        Small Pizza 5
        <input type="radio" id="smallPizza" name="pizza" value="5">
        Medium Pizza 8
        <input type="radio" id="mediumPizza" name="pizza" value="8">
        Large Pizza12
        <input type="radio" id="largePizza" name="pizza" value="12"><br>
        <label for="ingredients">Ingredients</label><br>
        <label for="mashrooms">Mashrooms 0.4$</label>
        <input type="checkbox" name="mashrooms" id="mashrooms" value="0.4">
        <label for="becon">Becon 1$</label>
        <input type="checkbox" name="becon" id="becon" value="1">
        <label for="tomatoes">Tomatoes 0.8$</label>
        <input type="checkbox" name="tomatoes" id="tomatoes" value="0.8">
        <label for="cheese">Cheese 0.9$</label>
        <input type="checkbox" name="cheese" id="cheese" value="0.9">
        <label for="olives">Olive 0.3$</label>
        <input type="checkbox" name="olives" id="olives" value="0.3"><br>
        <input type="tel" name="phoneNumber" pattern="\d{3}-\d{2}-\d{2}-\d{3}" title="000-00-00-000" placeholder="000-00-00-000" id="phoneNumber" required>
        <input type="text" name="address" placeholder="Your Address" id="address" required>
        <input type="submit" value="GO!">
    </form>

    <p id="pSumma"></p>
</body>
</html>
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
document.querySelector('form').addEventListener('input', function() {
  const sum =
    +(this.querySelector('[name="pizza"]:checked')?.value ?? 0) +
    [...this.querySelectorAll('[type="checkbox"]:checked')].reduce((acc, n) => acc + +n.value, 0);

  document.querySelector('#pSumma').innerText = `$${sum.toFixed(2)}`;
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы