为什么这个Javascript计算器不起作用

Question

basically I have this form which has its field populated by php and mysql. i am trying to get a javascript calculation I am using to work based on the zone they select and the quantity. But for some reason it is not working. My code is below. Any ideas as to why?

This is my Javascript code

        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;
}

This is my form

<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>

This is what was inserted into the database in the zone table

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);

This is the SQL statement

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

Answer 1

For starters you may want to adjust your HTML for your onClick events

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

change to:

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

now make some changes to your function

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;
    }

The changes to the function that you should take note of are:

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

notice the plural after the word Element(s) and then the [0] which designates which element with that name you would like to access the value of.

next inside of your if and elseIf statements we changed

 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;
        }

to:

 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;
        }

we changed all the double equals to all triple equal signs (check for exact match) and we need to explicitly check both sides of the or statment against the original variable.

Lastly, as Jonathan M pointed out we should but the re-assignment of the new value inside the getQuote function so it has the proper value.

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

Also notice I added a console.log("values: ", quantity,zoneSeat,quote);

to the code. This way, if you have the console open you should see that message once you click the "get quote" button.