使用HTML输入切换Javascript Else If.检查值并相应地显示结果.成本估算员

Javascript Else If switch using HTML input. Checking a value and displaying a result accordingly. Cost Estimator

本文关键字：结果 显示 输入 HTML Javascript Else 检查 If 使用      更新时间：2023-09-26

我正在做一个简单的成本估算器。我想做一个else-if开关，检查估算值并显示依赖于这些值的特定字符串。成本估算正在工作，但我无法将Else If切换到功能。

这是我的代码笔：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="container"中显示一个值，但目前什么也没发生。

我哪里错了？有更好的设置方法吗？也许使用JQuery？任何帮助都将不胜感激。抱歉我的基本编码。

您的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;
}
相关文章：