为什么 alert() 不能像我预期的那样给出消息？

Question

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.:不要介意这些食物的名字...

Answer 1

问题出在您的 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;
    }

Answer 2

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>

如果您有任何困惑，请告诉我。

Answer 3

您错误地将数据 混合到 您的 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>

为什么 alert() 不能像我预期的那样给出消息？

why alert() cannot give message as i expected?

javascript

html

web-frontend