javascript - Proper Practice when Calling a Function with a Return value From Button Click -
<html> <head> <script type="text/javascript"> function add(a,b) { var result = parseint(a) + parseint(b) return result } </script> </head> <body> <input type="text" name="numberone" id="txtnumberone" /> <input type="text" name="numbertwo" id="txtnumbertwo" /> <!-- <input type="button" id="btnclick" value="add" /> --> <button id="btnclick">add</button> <p id="answer"></p> <script> document.getelementbyid("btnclick").addeventlistener("click", function(){ var view = add(document.getelementbyid('txtnumberone').value, document.getelementbyid('txtnumbertwo').value ) document.getelementbyid("answer").innerhtml = view; }); </script> </body> </html> question:
when calling function return value, how go capturing result , displaying it?
the above code that, however, proper practice way? created addlistnerevent, , when user clicks button calls function returns answer, innerhtml displays answer. if not, proper practice?
this how it. note i'm lacking relevant information. few notes:
- this answer there many different kind of answers
- i'll assume 2 inputs indeed unique each other. don't want sum(input[i]), want sum(a, b). different otherwise
- i use
document.queryselector()syntax, more similar jquery , other libraries use - the form meaningless. html semantic, give semantics back. i'll assume kind of bank statement, please change names suit project
see demo in jsfiddle. code:
<html> <body> <!-- inputs belong form --> <form class="totalpayment"> <input class="paid" type="text" name="numberone" /> <input class="due" type="text" name="numbertwo" /> <button class="gettotal">add</button> </form> <p class="total"></p> <!-- scripts better @ end of body --> <script> // retrieve number input element function getnumber(selector) { var rawvalue = document.queryselector(selector).value; return parseint(rawvalue); } // sum value when submitting form document.queryselector(".totalpayment").addeventlistener("submit", function(e){ e.preventdefault(); var paid = getnumber('.paid'); var due = getnumber('.due'); document.queryselector(".total").innerhtml = paid + due; }); </script> </body> </html> or jquery, using makes life easier , it's commonplace. see demo in jsfiddle. code:
<html> <body> <form class="totalpayment"> <input class="paid" type="text" name="numberone" /> <input class="due" type="text" name="numbertwo" /> <button>add</button> </form> <p class="total"></p> <script src="jquery.min.js"></script> <script> // sum value when submitting form $(".totalpayment").submit(function(e){ e.preventdefault(); var paid = parseint($('.paid').val()); var due = parseint($('.due').val()); $(".total").html(paid + due); }); </script> </body> </html> both addeventlistener , innerhtml best practices when using no library (much better element.onclick or inline onclick anyway).
Comments
Post a Comment