Passing values from html to javascript

Question

So the user enters in the weight of apples that they want. Then the total is calculated using a standard formula and then it is printed out. I cant seem to get the output to work. Thanks in advance for the help.

         <!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>

You never call the output() function, and what's the orderFrom() that you're calling on the click of the button? And the page is going to reload once you press the submit button! — Mattia Nocerino
– Mattia Nocerino, Commented Nov 4, 2015 at 17:47
I think you need to give the form a name attribute with "orderForm" as a value — med116
– med116, Commented Nov 4, 2015 at 17:50
May want to copy the function into your code snippet as well. I don't feel too confident when seeing both "orderForm" and "orderFrom". — Keylan
– Keylan, Commented Nov 4, 2015 at 17:51

Andrew Evt · Accepted Answer · 2015-11-04 18:05:02Z

1

Don't use inline JS like onClick="orderFrom()",
Set id="orderForm" to your <form>
Set id="btn" to your <button>

Change your js for something like this

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/

edited Nov 4, 2015 at 18:05

answered Nov 4, 2015 at 17:59

Andrew Evt

3,6891 gold badge22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4285359 Over a year ago

I've made the changes, but I still don't cant get the output the to work, I've also looked at the link but I still can get mine to work

Andrew Evt Over a year ago

look carefully in your code, maybe you forgot to delete something, or id is invalid. Check jsFiddle once more time...

Noctisdark · Accepted Answer · 2015-11-04 18:13:34Z

0

Just to optimize the code, do you need to allocate variables for the number of fruits ?, You are only using them once so you can console.log() them multiplied by the price directly for example console.log(document.orderForm.apple.value*0.65 + ....), beside that you must put the code after the HTML or else it will load and run before the HTML is loaded and will not find anything thing to operate on, you can also wrap window.onload() around you code and keep it in the bottom(I do not recommand this !) >This is why you code won't run !

answered Nov 4, 2015 at 18:13

Noctisdark

3483 silver badges18 bronze badges

Collectives™ on Stack Overflow

Passing values from html to javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related