Adding number to an array on 'click'

Question

So I'm making a calculator instead of actual buttons I have them in div's so it is what it is.

I'm trying to do this is only vanilla javascript, and I'm trying to add an event listener to the "button", on click put the div into the array.. I think I am on the right path anyways, and I'm sure I am going to have to parse the array or the div's before having the calculations actually begin.

Check the JS below:

'use strict';

const input = document.querySelector('#input'), // input/output button
  numbers = document.querySelectorAll('.numbers div'), // number buttons
  operators = document.querySelectorAll('.operators div'), // operator buttons
  result = document.querySelector('#result'), // equal button
  clear = document.querySelector('#clear'); // clear button


let numberInput = []

document.getElementsByClassName('.numbers div')
  .addEventListener('click', function(event){
    numberInput.push(event);
  });
console.log(numberInput)

let resultDisplayed = false; // flag to keep an eye on what output is displayed

body {
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

p {
    display: block;
    margin: 2em auto;
}

.u-center {
    text-align: center;
}

.wrapper {
    max-width: 960px;
    margin: 4% auto;
    width: 100%;
}

.calculator {
    border-radius: 1px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    font-size: 1.8rem;
    letter-spacing: 5px;
    margin: 0 auto;
    padding: 20px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
    width: 29rem;
}

.input {
    border: 1px solid #ddd;
    border-radius: 1px;
    font-size: 2.5rem;
    height: 60px;
    margin-right: 6px;
    overflow-x: auto;
    padding-right: 1rem;
    padding-top: 10px;
    text-align: right;
    transition: all .2s ease-in-out;
}

.input:hover {
    border: 1px solid #bbb;
    -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.operators div {
    display: inline-block;
    border: 1px solid #bbb;
    border-radius: 1px;
    width: 80px;
    text-align: center;
    padding: 10px;
    margin: 20px 4px 10px 0;
    cursor: pointer;
    background-color: #ddd;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.operators div:hover {
    background-color: #ddd;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    border-color: #aaa;
}

.operators div:active {
    font-weight: bold;
}

.leftPanel {
    display: inline-block;
}

.numbers div {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 1px;
    width: 80px;
    text-align: center;
    padding: 10px;
    margin: 10px 4px 10px 0;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.numbers div:hover {
    background-color: #f1f1f1;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    border-color: #bbb;
}

.numbers div:active {
    font-weight: bold;
}

.equal {
    display: inline-block;
    border: 1px solid #3079ED;
    border-radius: 1px;
    width: 17%;
    text-align: center;
    padding: 127px 10px;
    margin: 10px 6px 10px 0;
    vertical-align: top;
    cursor: pointer;
    color: #FFF;
    background-color: #4d90fe;
    transition: all .2s ease-in-out;
}

.equal:hover {
    background-color: #307CF9;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    border-color: #1857BB;
}

.equal:active {
    font-weight: bold;
}

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Calculator</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
    <div class="calculator">
        <div class="input" id="input"></div>
        <div class="buttons">
            <div class="operators">
                <div>+</div>
                <div>-</div>
                <div>*</div>
                <div>/</div>
            </div>
            <div class="leftPanel">
                <div class="numbers">
                    <div>7</div>
                    <div>8</div>
                    <div>9</div>
                </div>
                <div class="numbers">
                    <div>4</div>
                    <div>5</div>
                    <div>6</div>
                </div>
                <div class="numbers">
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                </div>
                <div class="numbers">
                    <div>0</div>
                    <div>.</div>
                    <div id="clear">C</div>
                </div>
            </div>
            <div class="equal" id="result">=</div>
        </div>
    </div>
    <p class="u-center">
        Originally forked from: <a href="https://codepen.io/lalwanivikas/pen/eZxjqo">https://codepen.io/lalwanivikas/pen/eZxjqo</a>
    </p>
</div>
<script src="js/script.js"></script>
</body>
</html>

Marc Farias Jones · Accepted Answer · 2020-02-06 19:18:42Z

2

Change

document.getElementsByClassName('.numbers div')

to

document.querySelectorAll('.numbers div').forEach(btn => {
   btn.addEventListener('click', (event) => {
       numberInput.push(parseInt(event.target.textContent));
   }

}

edited Feb 6, 2020 at 19:18

answered Feb 6, 2020 at 19:06

Marc Farias Jones

1531 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Blue Over a year ago

okay sweet, once i get back my laptop i’ll give it a try, just started JS getting used to it.

Blue Over a year ago

Yep got everything going into the array now preciate it!

Collectives™ on Stack Overflow

Adding number to an array on 'click'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related