Question

我的代码有问题。该应用程序从下拉列表中提供选择值，并与文本框中输入的数字相乘，然后返回结果。但是每种情况下的数字都不同。为什么当我选择第二个选项（在本例中为value =“ 2”）或其他3,4,5,6时它们不起作用。仅第一个值=“ 1”有效。也许我对if-else语句有疑问或否？

我的错误在哪里？这是我的代码：

<!DOCTYPE html>
<html>
<body>

<form>
Брой служители:
<select id="mySelect">
  <option value="1">1-10</option>
  <option value="2">11-30</option>
  <option value="3">31-80</option>
  <option value="4">81-150</option>
  <option value="5">151-300</option>
  <option value="6">300+</option>
</select>
</form>
<form name="razhod">
  Месечен разход: <input type="text" id="ourSum">
 </form>
<form>
    Вашата сума: <input type="text" id="result">
    <br><button type="button" onclick="sum()">Изчисли</button>

</form>

<script>

function sum() {
    if(document.getElementById('mySelect').value=="1")
    {
        var num1=0.90;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
    else if(document.getElementById('mySelect').value=="2")
    {
        var num1=0.85;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
    else if(document.getElementById('mySelect').value=="3")
    {
        var num1=0.70;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
    else if(document.getElementById('mySelect').value=="4")
    {
        var num1=0.65;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
    else if(document.getElementById('mySelect').value=="5")
    {
        var num1=0.60;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
    else if(document.getElementById('mySelect').value=="6")
    {
        var num1=0.55;
        var num2=document.getElementById('ourSum').value;
        var res=document.getElementById('result');
        var myResult=num1*num2;
        document.getElementById('result').value=myResult;


    }
}
</script>

</body>
</html>

Answer 1

我已经测试了您的代码，据我所知，它可以正常工作。尽管如评论所述，该代码非常长且重复。

您看到的问题可能是浏览器或导致此问题的系统设置。我会注意到您使用的<form>标签看起来不正确。可能是他们试图提交一个值，这正在重新设置您的页面（就像您刷新了它一样）。尝试删除它们，然后再次测试。

最后，这是一个使代码更具可读性的示例：

function sum() {

    var mySelect = document.getElementById('mySelect');
    var ourSum = document.getElementById('ourSum');
    var res = document.getElementById('result');

    if (mySelect.value == "1")
    {
        res.value = ourSum.value * 0.9;
    }
    else if(mySelect.value=="2")
    {
        res.value = ourSum.value * 0.85;
    }
    else if(mySelect.value=="3")
    {
        res.value = ourSum.value * 0.7;
    }

    // and so on...
}

Answer 2

该代码正在运行，但是它太长且没有优化。以下几行是相同的代码：

function sum() {        
    var opts = [0, .9, .85, .7, .65, .6, .55];    
    var num1 = opts[document.getElementById('mySelect').value];    
    var num2 = document.getElementById('ourSum').value;
    var res = document.getElementById('result');    
    res.value=num1*num2;
}

and the working jsFiddle.

如何从javascript的下拉列表中选择值并与文本框中的输入数字相乘

2 个答案: