为什么 alert() 不能像我预期的那样给出消息?
why alert() cannot give message as i expected?
javascript代码:
// JavaScript Document
function getInfo()
{
var username,office,phone,food,amount,cost;
username = document.getElementById("username").value;
office = document.getElementById("office").value;
phone = document.getElementById("phone").value;
food = document.getElementById("food").value;
amount = document.getElementById("amount").value;
switch(food){
case "Sizzling Fry Jacks":
cost = 100;break;
case "Earthy Johnny Cake":
cost = 70;break;
case "Cut-o-Brute":
cost = 50;break;
case "Berlize Traditional Beer":
cost = 30;break;
}
cost *= amount;
alert("Username: "+username+"<br />"+"Office: "+office+"<br />"+"Phone: "+phone+"<br />"+"Food: "+food+"<br />"+"Amount: "+amount+"<br />"+"Total cost: "+cost+"<br /"+"Your food will arrive in 10 minutes!");
}
html代码:
<a href="../index.html"><input type='button' value="SUBMIT" name="submit" id="submit" class="apply" onClick="getInfo()" /></a>
为什么浏览器不给消息的信息?
我找不到我的 js 脚本的错误...
非常感谢!
p.s.:不要介意这些食物的名字...
问题出在您的 switch 语句中。您没有默认子句,它期望字符串需要匹配大小写,否则成本计算将失败。
试试这个:
switch(food){
case "Sizzling Fry Jacks":
cost = 100;break;
case "Earthy Johnny Cake":
cost = 70;break;
case "Cut-o-Brute":
cost = 50;break;
case "Berlize Traditional Beer":
cost = 30;break;
default:
cost = 1;
}
Here is the code that prints the alert per your expectations
HTML代码:
<html>
<head>
<title>Javascript Testing</title>
</head>
<body>
<pre>
Username : <input type="text" id="username" name="username" /> <br>
Office : <input type="text" id="office" name="office" /><br>
Phone : <input type="text" id="phone" name="phone" /><br>
Food : <input type="text" id="food" name="food" /><br>
Amount : <input type="text" id="amount" name="amount" /><br>
</pre>
<input type="button" value="submit" onclick="clickme();"><br>
</body>
</html>
Javascript代码:
<script type="text/javascript">
function clickme(){
var cost, amount, username, office, phone, food;
username = document.getElementById("username").value;
office = document.getElementById("office").value;
phone = document.getElementById("phone").value;
food = document.getElementById("food").value;
amount = parseFloat(document.getElementById("amount").value);
//Previous code
/*switch(food){
case "Sizzling Fry Jacks" :
cost = 100;
break;
case "Earthy Johnny Cake" :
cost = 70;break;
case "Cut-o-Brute" :
cost = 50;break;
case "Berlize Traditional Beer" :
cost = 30;break;
default : "This does not match"
}
cost *= amount; */
//Edited code
switch(food){
case "Sizzling Fry Jacks" :
cost = 100;
cost = amount * cost;
console.log(cost);
break;
case "Earthy Johnny Cake" :
cost = 70;
cost = amount * cost;
console.log(cost);
break;
case "Cut-o-Brute" :
cost = 50;
cost = amount * cost;
console.log(cost);
break;
case "Berlize Traditional Beer" :
cost = 30;
cost = amount * cost;
console.log(cost);
break;
default :
cost = 05;
cost = amount * cost;
console.log(cost);
break;
}
alert("Username: "+username+"\n"+"Office: "+office+"\n"+"Phone: "+phone+"\n"+"Food: "+food+"\n"+"Amount: "+amount+"\n"+"Total cost: "+cost+"\n"+"Your food will
arrive in 10 minutes!");;}
</script>
如果您有任何困惑,请告诉我。
您错误地将数据 混合到 您的 HTML。
如果将数据保留在JavaScript中,只使用HTML来显示数据,那么使用中的数据会容易很多计算,根据用户交互等修改它
单击下面的 运行 代码段 以查看其工作情况
// keep your data in a reasonable data container
var foods = {
"Sizzling Fry Jacks": 100,
"Earthy Johnny Cake": 70,
"Cut-o-Brute": 50,
"Berlize Traditional Beer": 30,
};
// define the info fields
var infoFields = ["username", "office", "phone", "food", "amount"];
// this function just gets the value of the info fields
// and adds the dynamic field `cost`
function getInfo() {
var info = infoFields.reduce(function(info, id){
info[id] = document.getElementById(id).value;
return info;
}, {});
info.cost = foods[info.food] * parseInt(info.amount, 10);
return info;
}
// this function displays the info object with an alert
function displayInfo(info) {
alert(Object.keys(info).map(function(field) {
return field + ": " + info[field];
}).join("\n"));
}
// now run it
var info = getInfo();
displayInfo(info);
label {
display: block;
}
<label>Username <input id="username" value="Ness"></label>
<label>Office <input id="office" value="Onett"></label>
<label>Phone <input id="phone" value="1234567"></label>
<label>Food <input id="food" value="Cut-o-Brute"></label>
<label>Amount <input id="amount" value="6"></label>
javascript代码:
// JavaScript Document
function getInfo()
{
var username,office,phone,food,amount,cost;
username = document.getElementById("username").value;
office = document.getElementById("office").value;
phone = document.getElementById("phone").value;
food = document.getElementById("food").value;
amount = document.getElementById("amount").value;
switch(food){
case "Sizzling Fry Jacks":
cost = 100;break;
case "Earthy Johnny Cake":
cost = 70;break;
case "Cut-o-Brute":
cost = 50;break;
case "Berlize Traditional Beer":
cost = 30;break;
}
cost *= amount;
alert("Username: "+username+"<br />"+"Office: "+office+"<br />"+"Phone: "+phone+"<br />"+"Food: "+food+"<br />"+"Amount: "+amount+"<br />"+"Total cost: "+cost+"<br /"+"Your food will arrive in 10 minutes!");
}
html代码:
<a href="../index.html"><input type='button' value="SUBMIT" name="submit" id="submit" class="apply" onClick="getInfo()" /></a>
为什么浏览器不给消息的信息? 我找不到我的 js 脚本的错误...
非常感谢!
p.s.:不要介意这些食物的名字...
问题出在您的 switch 语句中。您没有默认子句,它期望字符串需要匹配大小写,否则成本计算将失败。
试试这个:
switch(food){
case "Sizzling Fry Jacks":
cost = 100;break;
case "Earthy Johnny Cake":
cost = 70;break;
case "Cut-o-Brute":
cost = 50;break;
case "Berlize Traditional Beer":
cost = 30;break;
default:
cost = 1;
}
Here is the code that prints the alert per your expectations
HTML代码:
<html>
<head>
<title>Javascript Testing</title>
</head>
<body>
<pre>
Username : <input type="text" id="username" name="username" /> <br>
Office : <input type="text" id="office" name="office" /><br>
Phone : <input type="text" id="phone" name="phone" /><br>
Food : <input type="text" id="food" name="food" /><br>
Amount : <input type="text" id="amount" name="amount" /><br>
</pre>
<input type="button" value="submit" onclick="clickme();"><br>
</body>
</html>
Javascript代码:
<script type="text/javascript">
function clickme(){
var cost, amount, username, office, phone, food;
username = document.getElementById("username").value;
office = document.getElementById("office").value;
phone = document.getElementById("phone").value;
food = document.getElementById("food").value;
amount = parseFloat(document.getElementById("amount").value);
//Previous code
/*switch(food){
case "Sizzling Fry Jacks" :
cost = 100;
break;
case "Earthy Johnny Cake" :
cost = 70;break;
case "Cut-o-Brute" :
cost = 50;break;
case "Berlize Traditional Beer" :
cost = 30;break;
default : "This does not match"
}
cost *= amount; */
//Edited code
switch(food){
case "Sizzling Fry Jacks" :
cost = 100;
cost = amount * cost;
console.log(cost);
break;
case "Earthy Johnny Cake" :
cost = 70;
cost = amount * cost;
console.log(cost);
break;
case "Cut-o-Brute" :
cost = 50;
cost = amount * cost;
console.log(cost);
break;
case "Berlize Traditional Beer" :
cost = 30;
cost = amount * cost;
console.log(cost);
break;
default :
cost = 05;
cost = amount * cost;
console.log(cost);
break;
}
alert("Username: "+username+"\n"+"Office: "+office+"\n"+"Phone: "+phone+"\n"+"Food: "+food+"\n"+"Amount: "+amount+"\n"+"Total cost: "+cost+"\n"+"Your food will
arrive in 10 minutes!");;}
</script>
如果您有任何困惑,请告诉我。
您错误地将数据 混合到 您的 HTML。
如果将数据保留在JavaScript中,只使用HTML来显示数据,那么使用中的数据会容易很多计算,根据用户交互等修改它
单击下面的 运行 代码段 以查看其工作情况
// keep your data in a reasonable data container
var foods = {
"Sizzling Fry Jacks": 100,
"Earthy Johnny Cake": 70,
"Cut-o-Brute": 50,
"Berlize Traditional Beer": 30,
};
// define the info fields
var infoFields = ["username", "office", "phone", "food", "amount"];
// this function just gets the value of the info fields
// and adds the dynamic field `cost`
function getInfo() {
var info = infoFields.reduce(function(info, id){
info[id] = document.getElementById(id).value;
return info;
}, {});
info.cost = foods[info.food] * parseInt(info.amount, 10);
return info;
}
// this function displays the info object with an alert
function displayInfo(info) {
alert(Object.keys(info).map(function(field) {
return field + ": " + info[field];
}).join("\n"));
}
// now run it
var info = getInfo();
displayInfo(info);
label {
display: block;
}
<label>Username <input id="username" value="Ness"></label>
<label>Office <input id="office" value="Onett"></label>
<label>Phone <input id="phone" value="1234567"></label>
<label>Food <input id="food" value="Cut-o-Brute"></label>
<label>Amount <input id="amount" value="6"></label>