Question

jsfiddle demo

Bear with me, total newb here.

I’m trying to make a simple multiplication calculator, as a experimentation with Javascript.

The catch is that –

1. No libraries, just pure javascript.
2. Javascript must be unobtrusive.

Now, the problem arises, that it doesn’t give the value out.

When I do this locally, answer has a value of NaN, and if you hit Submit it stays that way, BUT, if you press the back button, you see the actual result.

In the JSFiddle, much is not shown, except for the fact that it simply doesn’t work.

Please tell me, is it even possible to make an unobtrusive calculator? How?

(PS. I was taking a bit of help from sciencebuddies, just to see basic syntax and stuff, but I found it can’t be done without code being obtrusive)

Answer 1

I realize you’re probably just getting started and don’t know what to include, remove, and whatnot. But, good advice here, clearly label your elements so you can understand them, and pare it down to the smallest possible code you need for it to work (even less, so you can build it up).

Here is your code reworked:

HTML

<div>
    <input type="text" id="multiplicand" value="4">
    <input type="text" id="multiplier" value="10">
    <button type="button" id="multiply">Multiply</button>
</div>
<p id="result">
    The product is: <span id="product">&nbsp;</span>
</p>

Javascript

window.onload = function(){
    var button = el('multiply'),
        multiplicand = el('multiplicand'),
        multiplier = el('multiplier'),
        product = el('product');

    function el(id) {
        return document.getElementById(id);
    };

    function multiply() {
        var x = parseFloat(multiplicand.value) || 0,
            y = parseFloat(multiplier.value) || 0;

        product.innerHTML = x * y;
    }

    button.onclick = multiply;
};

http://jsfiddle.net/userdude/EptAN/6/

A slightly more sophisticated approach, with add/subtract/multiply/divide:

http://jsfiddle.net/userdude/EptAN/9/