Javascript beginner - Can anyone tell me why my button doesn't work?

Question

jsfiddle is here --> http://jsfiddle.net/diabetesjones/015k1tjn/5/

here's an example of one that does work: http://jsfiddle.net/Ahopefulmachine/dkhj8o38/

Regarding the second jsfiddle (not mine), I don't quite get why his works without using document.getElementById on the button.

i feel like my problem is in the click function itself of :

document.getElementById('mainButton').onclick = function () {

thanks :)

First note, it's `getElementById` not `getElementByID` (case-sensitive). — j08691, Aug 07 '14 at 19:30

doniyor · Accepted Answer · 2014-08-07T19:35:52.097

2

working now: http://jsfiddle.net/doniyor/015k1tjn/9/

you had document.getElementByID which should be document.getElementById

AND

you didnot convert strings to int like numberOne = parseInt(numberOne, 10); where 10 is radix for decimal.
you had question == ADD which should be question == 'ADD'

edited Aug 07 '14 at 19:35

answered Aug 07 '14 at 19:30

doniyor

31,751
50
146
233

thank you very much!! with your and the other guy's answers i actually understand : ) – diabetesjones Aug 07 '14 at 19:47
@user3912585 glad to have helped. dont forget to accept one of our answers – doniyor Aug 07 '14 at 19:50

score 2 · Answer 2 · answered Aug 07 '14 at 19:32

There are three things wrong with your code:

It's getElementById not getElementByID (case-sensitive).
You didn't convert the strings you get from the input to numbers. You can do this easily by adding a + in front of the document.getElementById('number1').value;
You were doing comparisons against variables, not strings. Ex question == ADD instead of question == 'ADD'

See corrected jsFiddle example

document.getElementById('mainButton').onclick = function () {

    //Getting values of inputs and saving them to variables
    var numberOne = +document.getElementById('number1').value;
    var numberTwo = +document.getElementById('number2').value;

    //Setting values of the equations
    var addition = (numberOne + numberTwo);
    var subtraction = (numberOne - numberTwo);
    var multiplication = (numberOne * numberTwo);
    var division = (numberOne / numberTwo);

    //Prompting user for their desired equation
    var question = prompt("Do you wish to ADD, SUBTRACT, MULTIPLY, or DIVIDE?").toUpperCase();

    //If statement to show the proper equation based on the user's prior prompt
    if (question == 'ADD') {
        alert('I added the shit out of those numbers for you - turns out it is ' + addition);
    } else if (question == 'SUBTRACT') {
        alert('Did some of this, some of that, some minusing - your answer is ' + subtraction);
    } else if (question == 'MULTIPLY') {
        alert('Yeah, I multipled the numbers, big whoop, wanna fight abouddit? the answers over there --> ' + multiplication);
    } else if (question == 'DIVIDE') {
        alert('This ones my favorite, I love a good division - ' + division);
    };

};

@doniyor - Yup. And I just noticed you edited your answer to include `parseInt`. Don't forget about the radix when using it. — j08691, Aug 07 '14 at 19:38
wait, so using + saves the time of parseint? in terms of what javascript is actually doing there, it is just running the parseint function on anything in front of the +? — diabetesjones, Aug 07 '14 at 19:46
It's called a unary plus in JavaScript. See http://stackoverflow.com/questions/5450076/whats-the-significant-use-of-unary-plus-and-minus-operators, http://stackoverflow.com/questions/17106681/parseint-vs-unary-plus-when-to-use-which, and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_(.2B) — j08691, Aug 07 '14 at 19:48

Javascript beginner - Can anyone tell me why my button doesn't work?

2 Answers2