why alert() cannot give message as i expected?

Question

javascript code:

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

<a href="../index.html"><input type='button' value="SUBMIT" name="submit" id="submit" class="apply" onClick="getInfo()" /></a>

why browser doesn't give message of information? i cannot find mistake of my js script...

many thx!

p.s.:don't mind the name of these foods...

Chamilyan · Answer 1 · 2015-05-10T06:42:28.210

0

The problem is in your switch statement. You don't have a default clause and it's expecting strings that need to match the case otherwise the cost calculation will fail.

try this:

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;
    }

edited May 10 '15 at 06:42

answered May 10 '15 at 06:33

Chamilyan

9,347
10
38
67

i suppose that a switch statement without default clause is also vaild – SPiCaRia May 10 '15 at 06:48
it's valid but that's not the issue. The problem is that unless the variables EXACTLY MATCH the string, cost won't be set and the line where you do the math will error out. – Chamilyan May 10 '15 at 07:05
oh i forgot to tell u,the form that used to select food is a drop - down menu – SPiCaRia May 10 '15 at 08:02

mindfreak · Answer 2 · 2015-05-10T18:46:02.950

Here is the code that prints the alert per your expectations

HTML code:

<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 code:

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

Do let me know if you have any confusion.

but the problem isn't on alert(), the script goes wrong since the getElement part, so the alert() wasn't run. so the type of amount doesn't cause the error — SPiCaRia, May 10 '15 at 08:06
@Rundis - Is it that you want to see the final answer in alert box after the relevant computation in switch code section ? — mindfreak, May 10 '15 at 08:25
something familiar, i want to give feedback of what user input as a confirmation, and calculate the cost. switch statement is used to get food that was chosen, for different food has different price. and final output in alert box is product of amount and price — SPiCaRia, May 10 '15 at 08:41
@Rundis - **Just check the edited code...** **`I hope this is what exactly you were looking out for`** — mindfreak, May 10 '15 at 18:55
@Rundis - The reason why your code was not able to compute the final output previously, was due to the **`value of cost`** being **out of scope.** Since you were calculating the cost outside of switch case, the code was not able to pass the cost in the total amount section.. **Hope you are now able to relate what I am trying to convey !!** — mindfreak, May 10 '15 at 19:02

Mulan · Accepted Answer · 2015-05-10T19:06:16.657

You're making a mistake of mixing your data into your HTML.

If you keep the data in JavaScript and just use HTML to show the data, it will be a lot easier to use the data in calculations, modify it based on a user interaction, etc

Click Run Code Snippet below to see it work

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

why alert() cannot give message as i expected?

3 Answers3