html - How to make a calculator using JavaScript events?

Question

I'm trying to make a calculator in javascript, but I'm having trouble understanding how to create variables that will store targeted DOM elements, input/outputs and how to add event listeners to retrieve data from all buttons when they are clicked.

(This I Can Change if so needs be) I want to use function(event)to display the value of the button (number or operation) on the screen. I also want to use event.target.dataset.num to return the value and it should be stored as a new variable added to screen value.

My code so far is:

//3.
//Changing colors of opertion colors 

//Multiply Color
const colorMultiply = document.getElementById('multiply')
colorMultiply.style.backgroundColor = "green"

//Divide Color
const colorDivide = document.getElementById('divide')
colorDivide.style.backgroundColor = "red"

//subtract color
const colorSubtract = document.getElementById('subtract')
colorSubtract.style.backgroundColor="blue"

//add color
const colorAdd = document.getElementById('add')
colorAdd.style.backgroundColor="yellow"


//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)
//Makes it easier
const number1 = document.getElementById('number1')
number1.style.color="blue"
const number2 = document.getElementById('number2')
number2.style.color="blue"
const number3 = document.getElementById('number3')
number3.style.color="blue"
const number4 = document.getElementById('number4')
number4.style.color="blue"
const number5 = document.getElementById('number5')
number5.style.color="blue"
const number6 = document.getElementById('number6')
number6.style.color="blue"
const number7 = document.getElementById('number7')
number7.style.color="blue"
const number8 = document.getElementById('number8')
number8.style.color="blue"
const number9 = document.getElementById('number9')
number9.style.color="blue"
const number0 = document.getElementById('number0')
number0.style.color="blue"
const decimal = document.getElementById('decimal')
decimal.style.color="blue"

//Changing color of the clear button
const clear = document.getElementById('clear')
clear.style.color="white"
clear.style.backgroundColor="black"


// Then we want to insert `memoryStoreButton` before the `clear` button:
var memoryStoreButton = document.createElement("BUTTON");
memoryStoreButton.innerHTML = "MS";
clear.before(memoryStoreButton); //puts button before clear

// Then we want the `memoryClearButton` before `memoryStoreButton`
var memoryClearButton = document.createElement("BUTTON");
memoryClearButton.innerHTML = "MC";
memoryStoreButton.before(memoryClearButton);//puts button before clear

// and finally, the `memoryRestoreButton` before `memoryClearButton`
var memoryRestoreButton = document.createElement("BUTTON");
memoryRestoreButton.innerHTML = "MR";
memoryClearButton.before(memoryRestoreButton);//puts button before clear


const buttonClick = document.querySelector(".btn8 btn-grey");
/*
buttonClick.addEventListener('click', function(event){
})
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
.calculator8 {
  flex: 0 0 40%;
  }
.screen8 {
  width: 100%;
  font-size: 7rem;
  padding: 0.5rem;
  background: rgb(41,41,56);
  color: white;
  border:none;
  }
.buttons8 {
  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;
  }
.btn-grey {
  background: rgb(224,224,224);
  }
.btn8 {
  font-size: 4rem;
  }

<section class="calculator8">
  <h1> Calculator 8 </h1>
  <form>
    <input type="text" name="" id="numberBox" class="screen8">
  </form>
  <div class="buttons8"> 
    <!-- operation buttons -->
    <button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
    <button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
    <button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
    <button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
    <!-- number buttons -->
    <button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
    <button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
    <button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
    <button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
    <button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
    <button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
    <button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
    <button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
    <button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
    <button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
    <button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
    <button id="equals" type="button" class="btn8 btn-grey">=</button>
    <button id="clear" type="button" class="btn8 btn-grey">C</button>
  </div>
</section>

Answer 1

Well, I have remade your calculator in a simple but yet clear way, so you can now deal with each button press with one event handler that gives you the button that was pressed. now you have a good start point, happy coding :)

document.querySelector(".buttons8").onclick = function(e) {
  if(e.target.nodeName === "BUTTON") {
    console.log(`${e.target.textContent} is pressed`);
    //do something
  }
}

* {
  box-sizing: border-box;
}
.calculator8 {
  width: 300px;
}
.buttons8 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.buttons8 button {
  width: 75px;
  height: 60px;
  font-size: 150%;
}
.screen8 {
  width: 100%;
  height: 80px;
  background-color: #333;
}
.b_blue {
  background-color: blue;
}
.b_red {
  background-color: red;
}
.b_yellow {
  background-color: yellow;
}
.b_green {
  background-color: green;
}
.b_lgray {
  background-color: #ddd;
}
.b_vlgray {
  background-color: #eee;
}
.b_black {
  background-color: black;
}
.t_white {
  color: white;
}

<section class="calculator8">
  <h1>Calculator 8</h1>
  <input type="text" class="screen8" disabled>
  <div class="buttons8"> 
    <!-- operation buttons -->
    <button class="b_green">*</button>
    <button class="b_red">/</button>
    <button class="b_blue">-</button>
    <button class="b_yellow">+</button>
    <!-- number buttons -->
    <button class="b_lgray">.</button>
    <button class="b_lgray">9</button>
    <button class="b_lgray">8</button>
    <button class="b_lgray">7</button>
    <button class="b_lgray">6</button>
    <button class="b_lgray">5</button>
    <button class="b_lgray">4</button>
    <button class="b_lgray">3</button>
    <button class="b_lgray">2</button>
    <button class="b_lgray">1</button>
    <button class="b_lgray">0</button>
    <button class="b_lgray">=</button>
    <!-- other buttons -->
    <button class="b_vlgray">MR</button>
    <button class="b_vlgray">MC</button>
    <button class="b_vlgray">MS</button>
    <button class="b_black t_white">C</button>
  </div>
</section>