Question

由于某些原因，我的某些console.log没有通过。该按钮似乎不起作用，我认为我犯了一些愚蠢的错误，因为我很累。我在这里想念什么？我完全迷失了，不胜感激！谢谢！

function Count() {
          
        var newCount = 0
        
        if(document.toppings.Pepperoni.checked)
        {newCount = newCount + 1}
        if(document.toppings.Onion.checked)
        {newCount = newCount + 1}
        if(document.toppings.Sausage.checked)
        {newCount = newCount + 1}
        if(document.toppings.Mushrooms.checked)
        {newCount = newCount +1}
        if(document.toppings.Peppers.checked)
        {newCount = newCount + 1}
        if(document.toppings.Olives.checked)
        {newCount = newCount + 1}
        if(document.toppings.Garlic.checked)
        {newCount = newCount + 1}
        
        if(newCount >= 4)
        {
            alert("Only 3 Toppings, Please");
            document.toppings;return false;
        }
      }
    
    $(document).ready(function() {
      // Variables
      var crust;
      var sauce;
      var smallPrice;
      var medPrice;
      var largePrice;
      var topPrice = 0;
      var finalTotal;
      
      $("#total").click(function() {
        // Size
        var size = $('input:radio[name=size]:checked').val();
          
        if(size === undefined) {
            alert("What Size Pizza? Please pick an option."); }
          
        // Sauce
        sauce = $('input:radio[name=sauce]:checked').val();
          
        if(sauce === undefined) {
            alert("What Sauce Would You Like? Please pick an option."); }
          
        // Crust Type
        crust = $('input:radio[name=crust]:checked').val();
          
        if(crust === undefined) {
            alert("What Crust Type? Please pick an option."); }
        
        if ($('#Small').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 smallPrice = 12;
           }
           if ($('#Regular').is(':checked'))
           {
                 smallPrice = 14;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 smallPrice = 16;
           }
            return smallPrice;
        }
        if ($('#Medium').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 medPrice = 15;
           }
           if ($('#Regular').is(':checked'))
           {
                 medPrice = 17;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 medPrice = 21;
           }
            return medPrice;
        }
        if ($('#Large').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 largePrice = 18;
           }
           if ($('#Regular').is(':checked'))
           {
                 largePrice = 21;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 largePrice = 26;
           }
            return largePrice;
        }
        
        //Calculating Toppings
        
        if ($('#Small').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 1;
           }
           if(newCount = 2)
           {
                topPrice = 2;
           }
           if(newCount = 3)
           {
                topPrice = 3;
           }
            return topPrice;
        }
        if ($('#Medium').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 2;
           }
           if(newCount = 2)
           {
                topPrice = 4;
           }
           if(newCount = 3)
           {
                topPrice = 6;
           }
            return topPrice;
        }
        if ($('#Large').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 3;
           }
           if(newCount = 2)
           {
                topPrice = 6;
           }
           if(newCount = 3)
           {
                topPrice = 9;
           }
            return topPrice;
        }
        
        // Calculating the Final Cost with toppings
        
        if ($('#Small').is(':checked'))
        {
            finalTotal = (smallPrice + topPrice);
        }
        if ($('#Medium').is(':checked'))
        {
            finalTotal = (medPrice + topPrice);
        }
        if ($('#Large').is(':checked'))
        {
            finalTotal = (largePrice + topPrice);
        }
            console.log("s " + smallPrice);
            console.log("m " + medPrice);
            console.log("l " + largePrice);
            console.log("top " + topPrice);
            console.log("final " + finalTotal);
            
            $("#msgHere").html("Your Total is: $ " + finalTotal);
    });
});

<!DOCTYPE html>
<html>
<head> 
<script type="text/javascript"
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<title>Radio Buttons</title>
</head>
<body>
<form>
    <p>
    Pick A Size<br/>
    <input type="radio" name="size" value="Small" id="Small"required>Small<br/>
    <input type="radio" name="size" value="Medium" id="Medium">Medium<br/>
    <input type="radio" name="size" value="Large" id="Large">Large<br/>
    </p>
    </form>
    
    <form>
    <p>
    Pick A Crust<br/>
    <input type="radio" name="crust" value="Thin">Thin<br/>
    <input type="radio" name="crust" value="Regular">Regular<br/>
    <input type="radio" name="crust" value="Deep-dish">Deep-dish<br/>
    </p>
    </form>
    
    <form>
    <p>
    Pick A Sauce<br/>
    <input type="radio" name="sauce" value="Red">Red<br/>
    <input type="radio" name="sauce" value="White">White<br/>
    <input type="radio" name="sauce" value="Green">Green<br/>
    </p>
    </form>
    
    <form name="toppings">
    <p>
    Pick Your Toppings (No More Than 3)<br/>
    <input type="checkbox" name="Pepperoni" onClick="return Count()">Pepperoni<br/>
    <input type="checkbox" name="Onion" onClick="return Count()">Onion<br/>
    <input type="checkbox" name="Sausage" onClick="return Count()">Sausage<br/>
    <input type="checkbox" name="Mushrooms" onClick="return Count()">Mushrooms<br/>
    <input type="checkbox" name="Peppers" onClick="return Count()">Peppers<br/>
    <input type="checkbox" name="Olives" onClick="return Count()">Olives<br/>
    <input type="checkbox" name="Garlic" onClick="return Count()">Garlic<br/>
    </p>
    </form>
    <input type="button" id="total" value="Click For Your Total">
    <p id="msgHere"></p>
</body>
</html>

Answer 1

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"
            src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <title>Radio Buttons</title>
</head>
<body>
    <form>
        <p>
            Pick A Size<br />
            <input type="radio" name="size" value="Small" id="Small" required>Small<br />
            <input type="radio" name="size" value="Medium" id="Medium">Medium<br />
            <input type="radio" name="size" value="Large" id="Large">Large<br />
        </p>
    </form>

    <form>
        <p>
            Pick A Crust<br />
            <input type="radio" name="crust" value="Thin" id="Thin">Thin<br />
            <input type="radio" name="crust" value="Regular" id="Regular">Regular<br />
            <input type="radio" name="crust" value="Deep-dish" id="Deep-dish">Deep-dish<br />
        </p>
    </form>

    <form>
        <p>
            Pick A Sauce<br />
            <input type="radio" name="sauce" value="Red" id="Red">Red<br />
            <input type="radio" name="sauce" value="White" id="White">White<br />
            <input type="radio" name="sauce" value="Green" id="Green">Green<br />
        </p>
    </form>

    <form name="toppings">
        <p>
            Pick Your Toppings (No More Than 3)<br />
            <input type="checkbox" name="Pepperoni" onClick="return Count()">Pepperoni<br />
            <input type="checkbox" name="Onion" onClick="return Count()">Onion<br />
            <input type="checkbox" name="Sausage" onClick="return Count()">Sausage<br />
            <input type="checkbox" name="Mushrooms" onClick="return Count()">Mushrooms<br />
            <input type="checkbox" name="Peppers" onClick="return Count()">Peppers<br />
            <input type="checkbox" name="Olives" onClick="return Count()">Olives<br />
            <input type="checkbox" name="Garlic" onCount="return Count()">Garlic<br />
        </p>
    </form>
    <input type="button" id="total" value="Click For Your Total">
    <p id="msgHere"></p>
</body>
</html>

<script type="text/javascript">
    function Count() {
        var newCount = 0
        if(document.toppings.Pepperoni.checked)
        {newCount = newCount + 1}
        if(document.toppings.Onion.checked)
        {newCount = newCount + 1}
        if(document.toppings.Sausage.checked)
        {newCount = newCount + 1}
        if(document.toppings.Mushrooms.checked)
        {newCount = newCount +1}
        if(document.toppings.Peppers.checked)
        {newCount = newCount + 1}
        if(document.toppings.Olives.checked)
        {newCount = newCount + 1}
        if(document.toppings.Garlic.checked)
        {newCount = newCount + 1}

        if(newCount >= 4)
        {
            alert("Only 3 Toppings, Please");
            document.toppings;return false;
        }
      }

    $(document).ready(function() {
      // Variables
      var crust;
      var sauce;
      var smallPrice;
      var medPrice;
      var largePrice;
      var topPrice = 0;
      var finalCost;

      $("#total").click(function() {
        // Size
        var size = $('input:radio[name=size]:checked').val();

        if(size === undefined) {
            alert("What Size Pizza? Please pick an option."); }

        // Sauce
        sauce = $('input:radio[name=sauce]:checked').val();

        if(sauce === undefined) {
            alert("What Sauce Would You Like? Please pick an option."); }

        // Crust Type
        crust = $('input:radio[name=crust]:checked').val();

        if(crust === undefined) {
            alert("What Crust Type? Please pick an option."); }

        if ($('#Small').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 smallPrice = 12;
           }
           if ($('#Regular').is(':checked'))
           {
                 smallPrice = 14;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 smallPrice = 16;
           }
            //return smallPrice;
        }
        if ($('#Medium').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 medPrice = 15;
           }
           if ($('#Regular').is(':checked'))
           {
                 medPrice = 17;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 medPrice = 21;
           }
            //return medPrice;
        }
        if ($('#Large').is(':checked'))
        {
           if ($('#Thin').is(':checked'))
           {
                 largePrice = 18;
           }
           if ($('#Regular').is(':checked'))
           {
                 largePrice = 21;
           }
           if ($('#Deep-dish').is(':checked'))
           {
                 largePrice = 26;
           }
            //return largePrice;
        }

        //Calculating Toppings

        if ($('#Small').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 1;
           }
           if(newCount = 2)
           {
                topPrice = 2;
           }
           if(newCount = 3)
           {
                topPrice = 3;
           }
            //return topPrice;
        }
        if ($('#Medium').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 2;
           }
           if(newCount = 2)
           {
                topPrice = 4;
           }
           if(newCount = 3)
           {
                topPrice = 6;
           }
            //return topPrice;
        }
        if ($('#Large').is(':checked'))
        {
           if(newCount = 1)
           {
                topPrice = 3;
           }
           if(newCount = 2)
           {
                topPrice = 6;
           }
           if(newCount = 3)
           {
                topPrice = 9;
           }
            //return topPrice;
        }

        // Calculating the Final Cost with toppings

        if ($('#Small').is(':checked'))
        {
            finalTotal = (smallPrice + topPrice);
        }
        if ($('#Medium').is(':checked'))
        {
            finalTotal = (medPrice + topPrice);
        }
        if ($('#Large').is(':checked'))
        {
            finalTotal = (largePrice + topPrice);
        }
            console.log("s " + smallPrice);
            console.log("m " + medPrice);
            console.log("l " + largePrice);
            console.log("top " + topPrice);
            console.log("final " + finalTotal);

            $("#msgHere").html("Your Total is: $ " + finalTotal);
    });
});
</script>

检查此更新的代码段。

您的代码中有很多错误，例如
1。。在JS中，您通过ID获取元素，但没有为元素提供ID。
2。为什么您从点击事件中返回topPrice，largePrice等？那不是必需，因为返回后您的执行将不会继续。
3。。变量medPrice丢失。

单击按钮时不弹出任何内容，没有控制台消息[已澄清。]

1 个答案: