[英]Why isn't this Javascript calculator working
基本上我有這種形式,其領域由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)
);
對於初學者,您可能需要針對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語句的下一個內部,我們進行了更改
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語句的兩側。
最后,正如喬納森·M(Jonathan M)所指出的,我們應該在getQuote函數中重新分配新值,以便它具有適當的值。
else {
quote = quantity*15;
}
console.log("values: ", quantity,zoneSeat,quote);
document.getElementById("quotation").value = quote;
}
還要注意,我添加了一個console.log(“ values:”,Quantity,zoneSeat,quote);
代碼。 這樣,如果您打開了控制台,則在單擊“獲取報價”按鈕后應該會看到該消息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.