为什么不是'这个Javascript计算器不能工作
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语句的两侧。
最后,正如Jonathan M所指出的,我们应该在getQuote函数中重新分配新值,使其具有正确的值。
else {
quote = quantity*15;
}
console.log("values: ", quantity,zoneSeat,quote);
document.getElementById("quotation").value = quote;
}
还注意到我添加了console.log("values:",quantity,zoneSeat,quote);
到代码。这样,如果你打开了控制台,你应该会在点击"获取报价"按钮后看到这条消息。
相关文章:
- javascript计算器,点击即可计算
- 制作一个基本的Javascript计算器
- 我的测验中的JavaScript计算器
- 实时自动更新的jQuery/Javascript计算器(猜测AJAX)
- JavaScript计算器程序
- JavaScript计算器计算未选中的框
- 内容页面上 asp.net JavaScript计算器.可能吗
- Javascript 计算器返回字符串而不是值
- JavaScript计算器脚本不起作用
- 给出答案后,Javascript 计算器将无法清除
- 使用开关语句的 Javascript 计算器
- Javascript 计算器无法正常工作
- 简单的Javascript计算器,出了点问题
- JavaScript计算器显示NaN
- Javascript 计算器中的“else if”条件
- 尝试为所需的放大器创建一个 JavaScript 计算器
- JavaScript 计算器问题
- 简单的JavaScript计算器与JQuery
- Javascript计算器退格键第一次不起作用
- JavaScript 计算器 - 范围