-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スクリプトの間違いを見つけることができません...

多くのthx！

ps:これらの食べ物の名前は気にしないでください...

4

3 に答える 3

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 に答える
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 に答える