How to implement automatic price calculation for js?

  • 0
    Here is the code, puzzled, but could not find
    <!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>
    JavaScript Anonymous, Dec 24, 2019

  • 1 Answers
  • 0
    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)}`;
    });
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!