將值從html傳遞到javascript

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

不要使用像onClick =“ orderFrom（）”這樣的內聯JS，
將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-> https://jsfiddle.net/rzb44767/1/

Answer 2

只是為了優化代碼，您是否需要為水果數分配變量？，您只使用一次，因此您可以console.log（）直接將它們乘以價格，例如console.log(document.orderForm.apple.value*0.65 + ....) ，此外，您還必須將代碼放在HTML之后，否則它將在HTML加載之前加載並運行，並且找不到任何要操作的東西，還可以包裝window.onload （）將您的代碼保留在底部（我不建議這樣做！）>這就是為什么您的代碼將無法運行！

將值從html傳遞到javascript

問題描述

2 個解決方案

解決方案1
1 2015-11-04 17:59:39

解決方案2
0 2015-11-04 18:13:34

將值從html傳遞到javascript

問題描述

2 個解決方案

解決方案1 1 2015-11-04 17:59:39

解決方案2 0 2015-11-04 18:13:34

解決方案1
1 2015-11-04 17:59:39

解決方案2
0 2015-11-04 18:13:34