Question

因此，用户输入他们想要的苹果重量。然后使用标准公式计算总数，然后打印出来。我似乎无法让输出工作。在此先感谢您的帮助。

         <!DOCTYPE html>
<html>
    <head>

    <script type= "text/javascript">
    function output(){
    var total=0,nb1=0,nb2=0,nb3=0; 

    nb1=document.orderForm.apple.value;
    nb2=document.orderForm.orange.value;
    nb3=document.orderForm.banana.value;
    total=(nb1*0.65)+(nb2*0.50)+(nb3*0.73);
    document.writeln("The total price for all your fruit is "+ total);
    }   
    </script>
    </head>


    <body>
        <form>
        <label>
        Apples:
        <input type ="text" name="apple" size="3"   >       
        <br>
        <br>
        Orange:
        <input type ="text" name="orange" size="3">     
        <br>
        <br>
        Banana:
        <input type ="text" name="banana" size="3">
        <br>
        <br>

        <button 
        type="button" onClick="orderFrom()" value = "Submit" > Submit
        </button>

        <input type="reset">
        </label>
        </form>
    </body>
</html>

Answer 1

不要使用内联JS，例如onClick =＆＃34; orderFrom（）＆＃34;，
将id="orderForm"设置为<form>
将id="btn"设置为<button>

为这样的事情改变你的js

var form = document.getElementById('orderForm'),
    btn = document.getElementById('btn'),
    inputs = form.getElementsByTagName('input');

btn.addEventListener('click', function(e) {
    e.preventDefault();

    var total = parseFloat(inputs[0].value)*0.65 + parseFloat(inputs[1].value)*0.50 + parseFloat(inputs[2].value)*0.73;

    // print result -> this is bad code, better to use element.innerHTML = total
    document.writeln("The total price for all your fruit is " + total.toFixed(2));
}, false);

JSFiddle - ＆gt; https://jsfiddle.net/rzb44767/1/

Answer 2

只是为了优化代码，你需要为水果的数量分配变量吗？，你只使用它们一次所以你可以将console.log（）它们直接乘以价格，例如console.log(document.orderForm.apple.value*0.65 + ....)，除此之外，您必须将代码放在HTML之后，否则它将在加载HTML之前加载并运行，并且无法找到任何可操作的东西，您还可以在代码周围包装window.onload（）并将其保留在底部（我不推荐这个！）＆gt;这就是你不能运行代码的原因！

将值从html传递到javascript

2 个答案: