[RESOLVED] calculator JavaScript

cluelessPHP

I'm making a basic JavaScript calculator it works but I'm not sure I'm doing it right, there seems to be too many functions, perhaps I'm over thinking it. Right now this is step one..

    function add(e){
    event.preventDefault(e);        

    var one = document.getElementById("num1").value;
    var two = document.getElementById("num2").value;
    var total = document.getElementById("demo").innerHTML = parseInt(one) + parseInt(two);
    console.log(total);
}

function subtract(e){
event.preventDefault(e);        
var one = document.getElementById("num1").value;
var two = document.getElementById("num2").value;
var total = document.getElementById("demo").innerHTML = parseInt(one) - parseInt(two);
console.log(total);
}

 function times(e){
    event.preventDefault(e);        

    var one = document.getElementById("num1").value;
    var two = document.getElementById("num2").value;
    var total = document.getElementById("demo").innerHTML = parseInt(one) * parseInt(two);
    console.log(total);
}
function divide(e){
    event.preventDefault(e);        

    var one = document.getElementById("num1").value;
    var two = document.getElementById("num2").value;
    var total = document.getElementById("demo").innerHTML = parseInt(one) / parseInt(two);
    console.log(total);
}

   </script>

<form action="" method="post">
            <input type="text" id="num1">
            <input type="text" id="num2">
            <input type="submit" value="+" onclick="add()">
            <input type="submit" value="-" onclick="subtract()">
            <input type="submit" value="*" onclick="times()">
            <input type="submit" value="/" onclick="divide()">
    </form>   

    <p id="demo"></p>

NogDog

My JavaScript skills are too old and rusty, but that definitely needs a way to DRY it up so you don't have the same 3 lines of code starting each of those functions, along with the same line at the end (and virtually the same for the remaining line).

Just brainstorming here, as I have no idea if this would actually work, but maybe it will at least give you some ideas:

function add(e){
    var inputs = params(e);
    console.log(document.getElementById("demo").innerHTML = inputs[0] + inputs[1]);
}

function subtract(e){
    var inputs = params(e);
    console.log(document.getElementById("demo").innerHTML = inputs[0] - inputs[1]);
}

function times(e){
    var inputs = params(e);
    console.log(document.getElementById("demo").innerHTML = inputs[0] * inputs[1]);
}

function divide(e){
    var inputs = params(e);
    console.log(document.getElementById("demo").innerHTML = inputs[0] / inputs[1]);
}

/* return inputs as array */
function params(e) {
    event.preventDefault(e);
    return [document.getElementById("num1").value, document.getElementById("num2").value]
}

dalecosp

<html><head>
<script>
function calculate(type) {

var one, two, total;

one = parseInt(document.getElementById("num1").value);
two = parseInt(document.getElementById("num2").value);

switch (type) {
    case 'add':
            total = one + two;
            break;
    case 'subtract':
            total = one - two;
            break;
    case 'multiply':
            total = one * two;
            break;
    case 'divide':
            total = one / two;
            break;
   }
   document.getElementById("demo").innerHTML = total;
   return false;

}
</script></head><body>
            <input type="text" id="num1"> <br>
            <input type="text" id="num2"> <br>
            <input type="submit" value="+" onclick="calculate('add');return false;">
            <input type="submit" value="-" onclick="calculate('subtract');return false;">
            <input type="submit" value="*" onclick="calculate('multiply');return false;">
            <input type="submit" value="/" onclick="calculate('divide');return false;">
<p id="demo"></p>
</body>
</html>

For bonus points, I should capture key-presses and select the first input after each calculation, I guess?

cluelessPHP

I'm not sure about key presses(my puzzle for tonight) but, does this seem reasonable?

<html><head>
<script>
function calculate(type) {
 try{
    var one, two, total;
    one = parseInt(document.getElementById("num1").value);
    two = parseInt(document.getElementById("num2").value);

        switch (type) {
            case 'add':
                    total = one + two;
                    break;
            case 'subtract':
                    total = one - two;
                    break;
            case 'multiply':
                    total = one * two;
                    break;
            case 'divide':
                    total = one / two;
                    break;
            }
         if(isNaN(total)){
            document.getElementById("demo").innerHTML = "Please enter numbers only";
        }    
        else{    
            document.getElementById("demo").innerHTML = total;
            return false;
        }
}
catch(err){
     document.getElementById("demo").innerHTML = "Something when wrong try later";
}

}
</script></head><body>
            <input type="text" id="num1"> <br>
            <input type="text" id="num2"> <br>
            <input type="submit" value="+" onclick="calculate('add');return false;">
            <input type="submit" value="-" onclick="calculate('subtract');return false;">
            <input type="submit" value="*" onclick="calculate('multiply');return false;">
            <input type="submit" value="/" onclick="calculate('divide');return false;">
<p id="demo"></p>
</body>
</html>

Although thinking about it as pbismad has mention and nogdog has eluded to, perhaps some better way of displaying a catch error would be better?

Oh and yes I just worked around dale's code, for some reason I didn't think switch was in JavaScript :rolleyes:

NogDog

Stylistically, I like the idea of separate functions for each operation as opposed to a switch/case, but that would probably be cleaner to do in an OOP manner. My JavaScript OOP skills are as bad or worse than the rest of my JS abilities, though. 🙁 But then maybe you could have something like:

<input type="submit" value="+" onclick="calculator.add()" />

cluelessPHP

NogDog;11063487 wrote:
Stylistically, I like the idea of separate functions for each operation as opposed to a switch/case, but that would probably be cleaner to do in an OOP manner. My JavaScript OOP skills are as bad or worse than the rest of my JS abilities, though. 🙁 But then maybe you could have something like:
<input type="submit" value="+" onclick="calculator.add()" />

On the bright side, they are better than mine.

I was thinking about key press events, aren't they better for controls maybe? I.E press crtl+H for help

Apparently every job I've applied for over here wants me to know all the things, even when they have phoned me they have pretty much said that, so I'm learning all the things in between work, no idea how it works over there :p

NogDog

Yep, they want a full-stack developer who knows everything about everything but whom they can pay an entry-level wage. :rolleyes:

cluelessPHP

NogDog;11063493 wrote:
Yep, they want a full-stack developer who knows everything about everything but whom they can pay an entry-level wage. :rolleyes:

Yeah, but not much I do but suck it up and get on with it :rolleyes:

dalecosp

NogDog;11063493 wrote:
Yep, they want a full-stack developer who knows everything about everything but whom they can pay an entry-level wage. :rolleyes:

Yup .... today's hiring environment really makes me wish it was 1999 again and I was a COBOL guru ...

Weedpacket

The idea of a full-stack developer is very simple. It's like when you're hiring someone to build a house. You want to get an architect who is a certified electrician, plumber and carpenter who can also do things like painting, landscaping, fencing, laying the concrete and setting up the LAN, and has a good eye for interior decoration. Because then you only have to pay for one person's work.

cluelessPHP

Well it seems the way of it, after I improve I might try looking further afield for now it's just a case of going over the basics until I get them right I guess