Javascript Calculator

Question

I'm a beginner and I'm trying my first real project, making a calculator. I have a template HTML and CSS and I want to make it work by only editing the javascript. I'm stuck in the beginning and getting kinda frustrated if someone can point me in the right direction.

Here's a similar previously asked question (I think I'm supposed to include this when asking a question): Dynamical Calculator Javascript

Here's my script so far: https://jsfiddle.net/andthatch/an73my86/#&togetherjs=4goj5AV6Qk

Working now :) thanks guys. I'll stop back if I get stuck again.

var divElement = document.getElementById("calculator");
var keys = divElement.getElementsByTagName("span");
var input = document.getElementsByClassName('screen');
var decimalAdded = false;

    for (var i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', function(e) {

        var inputVal = input[0].innerHTML;
        var buttonVal = this.innerHTML;

        if(buttonVal === 'C') {
            input[0].innerHTML = '';
            decimalAdded = false;
        }
        else{
           input[0].innerHTML+=buttonVal;
        }

    });
}

`getElementsByClassName` returns an html collection and you treat it as a single element. Developer Tools are your friend. — epascarello, Jul 05 '16 at 18:11
I'd guess that the issue is that you're getting a list for `input` but expecting a single element. — nrabinowitz, Jul 05 '16 at 18:11
Link to a fiddle for everyone to have an easier time looking into it: https://jsfiddle.net/efc3hbt8/ — Trevor Hart, Jul 05 '16 at 18:15
As far as I can see here, you never put the values in `screen` div, and of course the `intput` variable is an HTTPCollection, so you have to keep the first element. — Mario Santini, Jul 05 '16 at 18:20
Possible duplicate of [What does getElementsByClassName return?](http://stackoverflow.com/questions/10693845/what-does-getelementsbyclassname-return) — Sebastian Simon, Jul 06 '16 at 01:25

AL-zami · Accepted Answer · 2016-07-05T19:00:28.520

You have some mistakes in your script file.input is a collection of elements as it is obtained through getElementsByClassName.So you have to specify the index for the only element under class 'screen' as its returning an array .Also use addEventListener instead of using 'onClick' as property on object

var divElement = document.getElementById("calculator");
var keys = divElement.getElementsByTagName("span");
var input = divElement.getElementsByClassName("screen");
var decimalAdded = false;

for (var i = 0; i < keys.length; i++) {
    keys[i].addEventListener('click', function(e) {

        var inputVal = input[0].innerHTML;
        var buttonVal = this.innerHTML;

        if(buttonVal === 'C') {
            input[0].innerHTML = '';
            decimalAdded = false;
        }else{
           input[0].innerHTML+=buttonVal;
        }

    });
}

Okay I'm trying to run that now and still not having luck. Here's what I have now: https://jsfiddle.net/efc3hbt8/6/ — andthatch, Jul 05 '16 at 18:53
i ckecked your jsfiddel.in your fiddle you wrote var screenElement=divElement.getElementsByClassName.should be var input = document.getElementsByClassName('screen'); — AL-zami, Jul 05 '16 at 18:56

Javascript Calculator

1 Answers1