Javascript Else如果使用HTML輸入切換。檢查一個值並相應顯示結果。成本估算器

Question

我正在做一個簡單的成本估算器。我想做一個else if開關，檢查推算值並顯示一個依賴於這些值的特定字符串。成本估算正在工作，但我不能讓Else If開關正常工作。

這裏是我的codepen：http://codepen.io/FredHair/pen/FgJAd

我試圖有一個去這裏：

function myContainer(){ 
    var container; 
    var x = Number(document.getElementById("x").value); 
    var y = Number(document.getElementById("y").value); 
    var z = Number(document.getElementById("z").value); 
if (z < 25 && x < 110 && y < 90){ 
container = "1"; 
} 
else if (z < 25 && x < 110 && y < 180){ 
container = "2"; 
} 
else if (z < 25 && x < 220 && y < 90){ 
container = "3"; 
} 
else if (z < 50 && x < 110 && y < 90){ 
container = "4"; 
} 
else if (z < 50 && x < 110 && y < 180){ 
container = "5"; 
} 
else if (z < 50 && x < 220 && y < 90){ 
container = "6"; 
} 
else if (z < 75 && x < 110 && y < 90){ 
container = "7"; 
} 
else if (z < 75 && x < 110 && y < 180){ 
container = "8"; 
} 
else if (z < 75 && x < 220 && y < 90){ 
container = "9"; 
} 
else if (z < 100 && x < 110 && y < 90){ 
container = "10"; 
} 
else if (z < 100 && x < 110 && y < 180){ 
container = "11"; 
} 
else if (z < 100 && x < 220 && y < 90){ 
container = "12"; 
} 
else{ 
container = "?" 
} 

document.getElementById("container").innerHTML = container; 
} 

這顯然意味着以顯示HTML H3 ID =「容器」的值，但目前什麼都沒發生。

我哪裏錯了？有沒有更好的方法來設置這個？也許使用JQuery？任何幫助將不勝感激。對不起，我的基本編碼。

Answer 1

您的myContainer函數永遠不會被調用。如果您在顯示結果後將其添加到其他函數中，則會得到您想要的結果。如：

... 
    //Display Result// 
    document.getElementById("result").innerHTML = " = £ " + result; 
    myContainer(); 
} 

這就是說你可以簡化兩種功能。例如，switch語句並沒有真正起到的目的了，因爲你可以修改您的標記，以產生要通過改變自己的價值觀，以50中的成績和30如：

<select id="choice" > 
    <option value = "1">1</option> 
    <option value = "50">2</option> 
    <option value = "30">3</option> 
</select> 

現在，在您計算器功能，您可以使用三元運算符設置結果。你讀它像一個if語句，意思是(if the value is true) ? (do this) : (else do this)。

function calculator(){ 
    var x = Number(document.getElementById("x").value); 
    var y = Number(document.getElementById("y").value); 
    var z = Number(document.getElementById("z").value); 
    var choice = Number(document.getElementById("choice").value); 
    var result = (choice === 1) ? z * 3 : x * 3 + choice; 
//Display Result// 
    document.getElementById("result").innerHTML = " = £ " + result; 
    myContainer(x,y,z); //pass the values of x, y, z as arguments 
} 

您可以簡化您的myContainer中，以及，直接從計算器功能值傳遞給它的x，y和z，那麼你就不需要再回到DOM，並再次檢索這些值。

function myContainer(x, y, z){ 
    var container; 

    //all your if-else here .. 

    document.getElementById("container").innerHTML = container; 
}