Question

我继续收到此错误未捕获的ReferenceError：在HTMLInputElement.onclick中未定义calculatePrice。

我已经在这里看到了关于这个错误的其他答案，但没有一个有效。我尝试在正文或头部定义脚本，没有什么区别。我还认为我连接它的功能和按钮是正确的，因为我与一个解决方案相比，所以当我按下它时，我真的不知道它为什么不起作用。

<html>
    <head> 
      <link href="style/myStyles.css" type="text/css" rel="stylesheet">
          <title> The Printing Company </title> 
    </head>
     <body>
     <script type="text/javascript"></script>
        <script>
        function calculatePrice() {
            var quantity, type, price 
            quantity = document.getElementById("qty").value;
            type = document.getElementById("cardstype").value;
            if (type.includes("Basic"){
                price = 10*(quantity/100);
            } else if (type.includes("Medium"){
                price = 15*(quantity/100);
            } else if (type.includes("High"){
                price = 20*(quantity/100);
            }
            alert("Your order will cost " + price + " GBP.");
          }
        </script>

        <form action="form.php" method="post">
                 <label >Company Name</label><br>
                 <input name="name" type="text" required /><br>
                 <br>
                 <label>Contact email</label><br>
                 <input name="email" type="email" required /><br>
                 <br>
                 <label>Business Card type</label><br>
                 <select name="cardstype" id="cardstype">
                    <option value="" disabled selected>-Select Card Quality-</option>
                    <option value="Basic Quality">Basic Quality</option>
                    <option value="Medium Quality">Medium Quality</option>
                    <option value="High Quality">High Quality</option>
                 </select><br>
                 <br>
                 <label>Business Cards quantity</label><br>
                 <input name="qty" id ="qty" type="number" required  Onchange = '
                        if( !( this.value >= 100 && this.value <= 1000 ) ) {
                            //alert the user that they have made a mistake
                            alert( this.value + " is not a valid quantity. Minimun quantity per order: 100 and maximum: 1000.");
                            this.value=""; //clears the text box
                        }'><br>
                 <br>
                 <input type="button" name="Price" value="Calculate Price" onclick="calculatePrice()"/>
                 <input type="submit" value="Submit Order"/>
            </form>
    </html>

有人可以帮忙吗？

Answer 1

你的函数中有一些拼写错误：

缺少关闭大括号（现在看起来已修复）
变量定义后缺少分号：var quantity, type, price;
if / elseif条件中的括号不匹配（3次）：if (type.includes("Basic")) {

以下代码修复了这些问题：

<script>
function calculatePrice() {
    var quantity, type, price;
    quantity = document.getElementById("qty").value;
    type = document.getElementById("cardstype").value;
    if (type.includes("Basic")){
        price = 10*(quantity/100);
    } else if (type.includes("Medium")){
        price = 15*(quantity/100);
    } else if (type.includes("High")){
        price = 20*(quantity/100);
    }
    alert("Your order will cost " + price + " GBP.");
}
</script>

因此，函数calculatePrice未定义且无法调用。

Answer 2

我认为你错过了if语句中的右括号：

if (type.includes("Basic") {
                          ^^^ here

工作示例：

function calculatePrice() {

    var quantity, type, price;
    quantity = document.getElementById("qty").value;
    type = document.getElementById("cardstype").value;

    if (type.includes("Basic")) {
        price = 10*(quantity/100);
    } else if (type.includes("Medium")) {
        price = 15*(quantity/100);
    } else if (type.includes("High")) {
        price = 20*(quantity/100);
    }

    alert("Your order will cost " + price + " GBP.");

}

    <form action="form.php" method="post">
             <label >Company Name</label><br>
             <input name="name" type="text" required /><br>
             <br>
             <label>Contact email</label><br>
             <input name="email" type="email" required /><br>
             <br>
             <label>Business Card type</label><br>
             <select name="cardstype" id="cardstype">
                <option value="" disabled selected>-Select Card Quality-</option>
                <option value="Basic Quality">Basic Quality</option>
                <option value="Medium Quality">Medium Quality</option>
                <option value="High Quality">High Quality</option>
             </select><br>
             <br>
             <label>Business Cards quantity</label><br>
             <input name="qty" id ="qty" type="number" required  Onchange = '
                    if( !( this.value >= 100 && this.value <= 1000 ) ) {
                        //alert the user that they have made a mistake
                        alert( this.value + " is not a valid quantity. Minimun quantity per order: 100 and maximum: 1000.");
                        this.value=""; //clears the text box
                    }'><br>
             <br>
             <input type="button" name="Price" value="Calculate Price" onclick="calculatePrice(event)"/>
             <input type="submit" value="Submit Order"/>
        </form>

获取未捕获的ReferenceError

2 个答案: