Question

我对编程很陌生，这让我难以忍受了好几天。我试着做一个非常简单的邮资计算器。该功能本身工作正常，但当我尝试将其链接到用户输入时，我没有输出。对此有任何帮助将非常感激。

这是我一直在努力的事情。

<!DOCTYPE html>


<html>
    <head>
        <title>postage calculator</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-     scale=1.0">
    </head>
    <body>
        <div>Postage Calculator</div>


<input id="amount" type="text" name="purchasePrice" placeholder="0" />
<input id="submit" type="submit" value="submit" />
<script type="text/javascript">

var amount = document.getElementById("amount");
var submit = document.getElementById("submit");

function aberdeen(){
    var weight = parseFloat(amount.value) || 0;
                if(weight>0 && weight<500){

                        return total = 3.50;

                }
                else if(weight<501 && weight<750){

                       return total = 4.30;
                   }
                else if(weight<751 && weight<1000){

                       return  total = 5.10;
                   }
               else if(weight<1001 && weight<1250){

                   return total = 5.90;
               }
                   else if(weight<1251 && weight<1500){

                       return total = 6.70;
                   }
                   else if(weight<1501 && weight<1750){

                       return total = 7.50;
                   }
                   else if(weight<1751 && weight<2000){

                       return total = 8.30;
                    }
                else{
                    return 0;
                }
            }
submit.addEventListener("click", aberdeen, false);
</script>
    </body>
          </html>

Answer 1

您需要具有将具有计算结果的元素，如：

<div id="output"></div>

var output = document.getElementById('output');
submit.addEventListener("click", function() {
   output.innerHTML = aberdeen();
}, false);

Answer 2

在加载要侦听的元素之后，需要绑定eventListeners。输出必须显示在某处。它可以显示在文本框，HTML元素或简单的alert（）-box中。我在使用element的示例中使用了一个文本框。

我还创建了一个代码的工作版本：

<!DOCTYPE html>


<html>
    <head>
        <title>postage calculator</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-     scale=1.0">
    </head>
    <body>
        <div>Postage Calculator</div>


<input id="amount" type="text" name="purchasePrice" placeholder="0" />
<input id="submit" type="submit" value="submit" />
<input id="userPays" type="text" name="userPays" />
<script type="text/javascript">



function aberdeen(amount){
    var weight = parseFloat(amount) || 0;
    if(weight>0 && weight<500){

        return 3.50;

    }
    else if(weight<501 && weight<750){

        return 4.30;
    }
    else if(weight<751 && weight<1000){

        return 5.10;
    }
    else if(weight<1001 && weight<1250){

        return 5.90;
    }
    else if(weight<1251 && weight<1500){

        return total = 6.70;
    }
    else if(weight<1501 && weight<1750){

        return 7.50;
    }
    else if(weight<1751 && weight<2000){

        return 8.30;
    }
    else{
        return 0;
    }
}



window.onload = function() {
    var amount = document.getElementById("amount");
    var submit = document.getElementById("submit");
    var userPays = document.getElementById("userPays");

    function count(){
        userPays.value = aberdeen(amount.value);
    }

    submit.addEventListener("click", count, false);
}
</script>
    </body>
          </html>

请参阅演示：http://codepen.io/anon/pen/zxaaQe

确保您的逻辑计算值正确，正如一些评论者建议的那样。

没有javascript函数的输出

2 个答案: