How to define textfield and radio button listeners in JavaScript

Question

So for a class project I have to make this simple calculator, which was very easy to do. However, I'm required to define my event listeners in JavaScript instead of using something like: onclick="compute()"

But I need the result of my calculator to update whenever I change a value in my field or select any of the radio buttons. How can I do this? The code I have now is not working.

<script>
function compute(){
    var functionSelected = document.getElementsByName("function");
    var valueOne = Number(document.getElementById("fielda").value);
    var valueTwo = Number(document.getElementById("fieldb").value);
    var ans = 0;
    if(functionSelected[0].checked){
        ans = (valueOne+valueTwo);
    }
    if(functionSelected[1].checked){
        ans = (valueOne-valueTwo);
    }
    if(functionSelected[2].checked){
        ans = (valueOne*valueTwo);
    }
    if(functionSelected[3].checked){
        ans = (valueOne/valueTwo);
    }
    if(ans>=9007199254740992){
        document.getElementById("solution").textContent = "ERROR NUMBER TO LARGE TO BE COMPUTED";
    }
    else{
        document.getElementById("solution").textContent = "Equals: " + ans;
    }
}

document.getElementById("fielda").addEventListener("change", compute(), false);
document.getElementById("fieldb").addEventListener("change", compute(), false);
document.getElementByName("function").onclick = compute();
</script>

</head>
<body>
    <p>
    <input type="number" id="fielda"/><br />
    <input type="number" id="fieldb"/><br />
    <label><input name="function" type="radio" value="add"/> Add</label><br />
    <label><input name="function" type="radio" value="subtract"/> Subtract</label><br />
    <label><input name="function" type="radio" value="multiply"/> Multiply</label><br />
    <label><input name="function" type="radio" value="divide"/> Divide</label><br />
    </p>
    <p>
    <output id="solution">Solution Will Appear Here</output>
    </p>
</body>

`.addEventListener("change", compute, false)`. Function reference VS function call. — elclanrs, Nov 07 '13 at 05:36
Related: [http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text](http://stackoverflow.com/questions/574941/best-way-to-track-onchange-as-you-type-in-input-type-text) — felixgaal, Nov 07 '13 at 05:41
Could you be more specific. If I just change that, it still doesn't work. — user2898916, Nov 07 '13 at 05:41
`compute` is a function object.`compute()` executes the `compute` function and returns its value (undefined). You need to pass a function as callback, not what the function returns. — elclanrs, Nov 07 '13 at 05:56

score 0 · Accepted Answer · answered Nov 07 '13 at 05:54

0

You can use

<select ... onchange="javascript:compute();">

There are a lot of events that you can use in response to different events depending on the control.

They are named onmouseover, onclick, onchange, etc. and you can assign a javascript function to each one if you want.

Another alternative is to use you following syntax:

document.getElementById("id_of_select_control").onchange = function() {
    // your code here
}

Or if you use jQuery in your project, something like this:

$("#id_of_select_control").change(function() {
    // your code here
});

answered Nov 07 '13 at 05:54

felixgaal

2,403
15
24

Would you mind expanding on this answer? I think I'm close with using: document.getElementById("fielda").onchange = compute; But this doesn't work? – user2898916 Nov 11 '13 at 01:21
I can't add any html from what I have, it can only be JavaScript. – user2898916 Nov 11 '13 at 01:22
For that specific part, this is a common question asked so many times. I won't reinvent the wheel. Take a look here: http://stackoverflow.com/questions/2554149/html-javascript-change-div-content – felixgaal Nov 11 '13 at 11:01

How to define textfield and radio button listeners in JavaScript

1 Answers1