How to force function execution after input with JavaScript

Question

I am making a small calculator (just for JavaScript learning) and I have two input fields for fraction calculation:

Field: numerator
Field: denominator

And a button "Calculate fraction" which executes the function myFraction(numerator,denominator) when user clicks on it.

Is it possible to do the same without the Button? I mean JavaScript should recognize that someone is making input and then calculate the fraction automatically.

have you tried sth like jQuery blur() method?

Ram
– Ram

2012-06-16 13:56:52 +00:00
Commented Jun 16, 2012 at 13:56 — Ram
– Ram, Commented Jun 16, 2012 at 13:56

robbymurphy · Accepted Answer · 2012-06-16 14:03:55Z

3

You can hook into the onkeyup or onkeydown event handlers and call your function:

<input type="text" id="numerator" onkeyup="myFraction()" />
<input type="text" id="denominator" onkeyup="myFraction()" />

You'll need to grab the values of the text boxes inside the myFraction() function and check to see if they're blank before you output the fraction value to the screen though.

function myFraction() {
    if(document.getElementById("numerator").value != "" &&
       document.getElementById("denominator").value != "") {
        ...do calculations
    }
}

answered Jun 16, 2012 at 14:03

robbymurphy

7412 gold badges5 silver badges16 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:29:10Z

0

Sure, I think you need onChange() (as the text is being edited) or onBlur() (when the textbox looses focus). See the difference here.

Since you're studying, jQuery can help with some of the nuances - including here.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jun 16, 2012 at 13:58

m.edmondson

30.9k29 gold badges129 silver badges212 bronze badges

Comments

James-Jesse Drinkard · Accepted Answer · 2012-06-16 14:03:56Z

0

Javascript is event driven, so yes, you can catch the event after they are typing with keyup or when the user moves off from a textbox control.

You could check the length of a textbox after they leave it, validate what they entered and then run the calculation.

I usually use blur to catch after a user leaves a textbox. I usually use Onchange for select.

edited Jun 16, 2012 at 14:03

answered Jun 16, 2012 at 13:58

James-Jesse Drinkard

15.8k16 gold badges120 silver badges141 bronze badges

3 Comments

Marcel Korpel Over a year ago

Onchange will also fire on input boxes, after blur and if the text has been changed.

alisia123 Over a year ago

Thanks, but is it possible to do the calculation during the user is typing the numbers?

James-Jesse Drinkard Over a year ago

You have the keyup/keydown events that fire continuously, but you would have to be checking constantly to see if they were finished with their input and what mechanism would you use? Another function to check for length? You are making it too complicated I think. It would be a lot easier if you could show us some code.

Collectives™ on Stack Overflow

How to force function execution after input with JavaScript

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related