[Solved] why alert() cannot give message as i expected?

by


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>

solved why alert() cannot give message as i expected?