为什么这个 Javascript 计算器不工作

Question

基本上我有这个表单，它的字段由 php 和 mysql 填充。我正在尝试根据他们选择的区域和数量来获得我用来工作的 javascript 计算。但由于某种原因，它不起作用。我的代码如下。关于为什么的任何想法？

这是我的 Javascript 代码

        function getQuote() {
            var quantity = document.getElementByName("qty").value;
            var zoneSeat = document.getElementByName("zone").value;
            var quote;
            if (zoneSeat == "balcony") {
                quote= quantity*27;
            }
            else if (zoneSeat == "box 1" || "box 2") {
                quote= quantity*75;
            }
            else if (zoneSeat == "box 3" || "box 4") {
                quote= quantity*60;
            }

            else if (zoneSeat == "front stalls") {
                quote= quantity*22.50;
            }

            else  {
                quote = quantity*15;
            }
        }
    document.getElementById("quotation").value = quote;
}

这是我的表格

<form class="formDesign" action = "process.php" method="post">
        <fieldset>



                <p><label for="row">Row: </label><select name="row"></p>

                    <?php 
                        $strRow = "SELECT DISTINCT RowNumber FROM Seat";
                        $result = $con->query($strRow);
                    ?>
                    <?php while ($row = $result->fetch_row()): ?>
                    <?php $i = $row[0]; ?>
                    <option><?php echo $i; ?></option>
                <?php 
                $i++;
                endwhile;?> 
                </select>


                    <p><label for="seat">Zone: </label><select name="zone"></p>

                    <?php 
                        $strZone = "SELECT * FROM Zone";
                        $result = $con->query($strZone);
                    ?>
                    <?php while ($row = $result->fetch_row()): ?>
                    <?php $i = $row[0];?>
                    <option><?php echo $i?></option>
                <?php 
                $i++;
                endwhile;?> 
                </select>

                <p><label for="numberOfTickets">Quantity: 
                </label><input type="number" name="qty" min="1" max="5"></p>
                <p><input class="mybutton" name="Quote" value="Calculate quote" onclick="getQuote();"></p>  
                <label>£:</label><input name="quotation" id="quotation" type="text" readonly="readonly" value="total cost"/>

                <p><input type="submit" name= "sub"></p>
        </fieldset>

    </form>



            <p><label for="row">Row: </label><select name="row"></p>

            <?php 
                $strRow = "SELECT DISTINCT RowNumber FROM Seat";
                $result = $con->query($strRow);
            ?>
            <?php while ($row = $result->fetch_row()): ?>
            <?php $i = $row[0]; ?>
            <option><?php echo $i; ?></option>
        <?php 
        $i++;
        endwhile;?> 
        </select>


            <p><label for="seat">Zone: </label><select name="zone"></p>

            <?php 
                $strZone = "SELECT * FROM Zone";
                $result = $con->query($strZone);
            ?>
            <?php while ($row = $result->fetch_row()): ?>
            <?php $i = $row[0];?>
            <option><?php echo $i?></option>
        <?php 
        $i++;
        endwhile;?> 
        </select>

        <p><label for="numberOfTickets">Quantity: 
        </label><input type="number" name="qty" min="1" max="5"></p>
        <p><input class="mybutton" name="Quote" value="Calculate quote" onclick="getQuote();"></p>  
        <label>£:</label><input name="quotation" id="quotation" type="text" readonly="readonly" value="total cost"/>

        <p><input type="submit" name= "sub"></p>
</fieldset>

这是在区域表中插入数据库的内容

insert into Zone values ('rear stalls', 1.00);
insert into Zone values ('front stalls', 1.50);
insert into Zone values ('balcony', 1.80);
insert into Zone values ('box 1', 5.00);
insert into Zone values ('box 2', 5.00);
insert into Zone values ('box 3', 4.00);
insert into Zone values ('box 4', 4.00);

这是 SQL 语句

CREATE TABLE Zone(
 Name char(12) not null,
 PriceMultiplier float not null default 1.0, 
 PRIMARY KEY (Name)
);

Answer 1

对于初学者，您可能需要针对 onClick 事件调整 HTML

<input class="mybutton" name="Quote" value="Calculate quote" onclick="getQuote();">

改为：

<button type="button" class="mybutton" name="Quote" onclick="getQuote();">get quote</button>

现在对您的函数进行一些更改

function getQuote() {
        var quantity = document.getElementsByName("qty")[0].value;
        var zoneSeat = document.getElementsByName("zone")[0].value;
        var quote;
        if (zoneSeat === "balcony") {
            quote= quantity*27;
        }
        else if (zoneSeat === "box 1" || zoneSeat === "box 2") {
            quote= quantity*75;
        }
        else if (zoneSeat === "box 3" || zoneSeat === "box 4") {
            quote= quantity*60;
        }

        else if (zoneSeat === "front stalls") {
            quote= quantity*22.50;
        }

        else  {
            quote = quantity*15;
        }
        console.log("values: ", quantity,zoneSeat,quote);
        document.getElementById("quotation").value = quote;
    }

你应该注意的函数变化是：

document.getElementsByName("qty")[0].value;
document.getElementsByName("zone")[0].value;

注意单词 Element(s) 后面的复数形式，然后是 [0]，它指定了您希望访问的具有该名称的元素的值。

我们更改了 if 和 elseIf 语句中的 next

 if (zoneSeat == "balcony") {
            quote= quantity*27;
        }
        else if (zoneSeat == "box 1" || "box 2") {
            quote= quantity*75;
        }
        else if (zoneSeat == "box 3" || "box 4") {
            quote= quantity*60;
        }

        else if (zoneSeat == "front stalls") {
            quote= quantity*22.50;
        }

到：

 if (zoneSeat === "balcony") {
            quote= quantity*27;
        }
        else if (zoneSeat === "box 1" || zoneSeat === "box 2") {
            quote= quantity*75;
        }
        else if (zoneSeat === "box 3" || zoneSeat === "box 4") {
            quote= quantity*60;
        }

我们将所有双等号更改为所有三等号（检查是否完全匹配），并且我们需要根据原始变量显式检查 or 语句的两侧。

最后，正如 Jonathan M 指出的那样，我们应该在 getQuote 函数中重新分配新值，使其具有正确的值。

 else  {
            quote = quantity*15;
        }
        console.log("values: ", quantity,zoneSeat,quote);
        document.getElementById("quotation").value = quote;
    }   

另外请注意我添加了一个 console.log("values: ", quantity,zoneSeat,quote);

到代码。这样，如果您打开了控制台，您应该会在单击“获取报价”按钮后看到该消息。