0

document.addEventListener("DOMContentLoaded", function() {

const btns = document.querySelectorAll('.num');
const screen = document.querySelector('.screen');
const equal = document.querySelector('.btn-equal');
const clear = document.querySelector('btn-clear');


for (var i = 0; i < btns.length; i++) {
 btns[i].addEventListener('click', function () {
  let number = btns[i].getAttribute('data-num');
  screen.value += number;
 })
}
});
*{
 padding: 0;
 margin: 0;
 box-sizing: border-box; /*learn box-sizing*/
}

body {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
}

.calculator {
 flex: 0 0 60%;
}

.screen {
 width: 100%;
 background: black;
 color: white;
 font-size: 6rem;
 padding: 0.5rem;
 border: none;
 padding: 0.5rem;
}

.buttons {
 display: flex;
 flex-wrap: wrap;
 transition: all 0.5s linear;
}

button {
 flex: 0 0 25%;
 border: 1px solid black;
 padding: 0.25rem 0;
 transition: all 2s ease; /*learn tansition*/
}

button:hover {
 background: blue;
 color: white;
}

.btn-yellow {
 background: orange;
 color: white;
}

.btn-grey {
 background: lightgrey;
 color: white;
}

.btn-equal {
 background: limegreen;
}

.btn-clear {
 background: red;
}

.btn {
 font-size: 3.5rem;
}
<!DOCTYPE html>
<html>
<head>
 <title>Calculator</title>
 <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <section class="calculator">
  <form>
   <input type="text" name="" id="" class="screen">
  </form>
  <div class="buttons">
   <!-- yellow buttons -->
   <button type="button" class="num btn btn-yellow" data-num="+">+</button>
   <button type="button" class="num btn btn-yellow" data-num="*">*</button>
   <button type="button" class="num btn btn-yellow" data-num="/">/</button>
   <button type="button" class="num btn btn-yellow" data-num="-">-</button>
   <!-- grey buttons -->
   <button type="button" class="num btn btn-grey" data-num=".">.</button>
   <button type="button" class="num btn btn-grey" data-num="9">9</button>
   <button type="button" class="num btn btn-grey" data-num="8">8</button>
   <button type="button" class="num btn btn-grey" data-num="7">7</button>
   <button type="button" class="num btn btn-grey" data-num="6">6</button>
   <button type="button" class="num btn btn-grey" data-num="5">5</button>
   <button type="button" class="num btn btn-grey" data-num="4">4</button>
   <button type="button" class="num btn btn-grey" data-num="3">3</button>
   <button type="button" class="num btn btn-grey" data-num="2">2</button>
   <button type="button" class="num btn btn-grey" data-num="1">1</button>
   <button type="button" class="num btn btn-grey" data-num="0">0</button>
   <button type="button" class="num btn btn-grey btn-equal">=</button>
   <button type="button" class="num btn btn-grey btn-clear">C</button>
  </div>
 </section>
 <script type="text/javascript" src="script.js"></script>
</body>
</html>

Hey guys, so I'm trying to make a simple calculator and right now I'm writing the function to handle every button that is clicked, except the equal and clear button. All i want to do right now is display the value of the button to the input screen of the calculator. Im getting this error though: Uncaught TypeError: Cannot read property 'getAttribute' of undefined at HTMLButtonElement. I've looked around and most people say its because my script is loading before the DOM but I put the 'DOMContentLoaded' event in there and still can't get it to work. Any help would be awesome.

  • Try using `let` in your for loop instead of `var`: `for (let i = 0; i < btns.length; i++)` – Mark Jul 30 '18 at 05:51
  • Nice it worked, why let instead of var? aren't they pretty much the same. –  Jul 30 '18 at 06:07
  • Also I added a handler to the equal button here: equal.addEventListener('click', function() { let value = eval(screen.value); screen.value = value; }) –  Jul 30 '18 at 06:23
  • i get null on the calculator screen and the error is a unexpected or invalid token on the line i use the eval method. I'm following a tutorial and my code is the exact same as his but he isn't getting the error? –  Jul 30 '18 at 06:25
  • The linked duplicate has a lot of great information on `let` vs `var` in loops. It’s a better explanation than I would give. – Mark Jul 30 '18 at 06:25
  • Ok ill check it out, you mind looking at the handler for the equal button? The desired effect should clear the screen and display the evaluated answer: e.g- 8+8 (click =) now input shows 16, instead input shows 8+8null?? –  Jul 30 '18 at 06:36

0 Answers0