Question

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

1. Field: numerator
2. 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.

Answer 1

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