-4

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 脚本的错误...

很多谢谢！

ps：不要介意这些食物的名字......

4

3 回答 3

0

问题出在您的 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;
    }
于 2015-05-10T06:33:05.450 回答
0

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>

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

于 2015-05-10T07:54:02.317 回答
0

您在将数据混合到HTML 中时犯了一个错误。

如果您将数据保存在 JavaScript 中并仅使用 HTML 来显示数据，那么在计算中使用数据、根据用户交互进行修改等会容易得多

点击Run Code Snippet下面查看它的工作原理

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

于 2015-05-10T19:00:50.713 回答