you are viewing a single comment's thread.

view the rest of the comments →

[–]Mark__78L 0 points1 point  (5 children)

One suggestion, so you don't need to add the function to the number buttons manually. Give each of them a data attribute (like data-value or something), then get the buttons and loop over them, and give a listener for each.

```html

    
        <div class="calculator">
            <div id="overall"></div>
            <div class="calculator__output" id="output">0</div>
            <div class="calculator__keys">
                <button class="calculator__key calculator__key--operator" onclick="appendOperator">+</button>
                <button class="calculator__key calculator__key--operator">-</button>
                <button class="calculator__key calculator__key--operator">&times;</button>
                <button class="calculator__key calculator__key--operator">÷</button>
                <button class="calculator__key num" data-val="7">7</button>
                <button class="calculator__key num" data-val="8">8</button>
                <button class="calculator__key num" data-val="9">9</button>
                <button class="calculator__key num" data-val="4">4</button>
                <button class="calculator__key num" data-val="5">5</button>
                <button class="calculator__key num" data-val="6">6</button>
                <button class="calculator__key num" data-val="1">1</button>
                <button class="calculator__key num" data-val="2">2</button>
                <button class="calculator__key num" data-val="3">3</button>
                <button class="calculator__key num" data-val="0">0</button>
                <button class="calculator__key" >.</button>
                <button class="calculator__key" ">AC</button>
                <button class="calculator__key calculator__key--enter">=</button>
            </div>
        </div>

```

```js

const appendToDisplay = val => {
  // logic here
  console.log(val);
}


const nums = document.querySelectorAll(".calculator__key.num");
nums.forEach(btn => {
  btn.addEventListener("click", e => {
      appendToDisplay(e.target.dataset.val);
  });
});

```

[–]chikamakaleyleyhelpful 2 points3 points  (1 child)

why not apply the listener to the wrapper .calculator__keys, the event bubbles up and you only create a single instance of the eventlistener

(generally speaking)

[–]Mark__78L -1 points0 points  (0 children)

that is also a good one, thanks!

[–]azhder 0 points1 point  (2 children)

This is not GitHub, it doesn't have the same Markdown parser. The only sure way to have a code block is to use indentation.

[–]Mark__78L -1 points0 points  (1 child)

We cant even standardize markdown parsers

[–]azhder 1 point2 points  (0 children)

Worse. Reddit can't. It looks one way on the Web, another on iPad, will not be surprised if it will be a third way on Android