Calculator: fix delete button

I am unable to understand how to code the javascript for the button which delete the recent character from display of the calculator.

When I try to do by this way length - 1 it deletes all my values written in display of the calculator and displays me random number or undefined.

let string = '';
// let Delete = document.getElementsByClassName('del');
let screen = document.getElementById('screen');
let buttons = document.querySelectorAll('.button');

function del() {
  screen.value = screen.value.length - 1;
}
Array.from(buttons).forEach((button) => {
  button.addEventListener('click', (e) => {
    if (e.target.innerHTML == '=') {
      string = eval(string);
      document.querySelector('input').value = string;
    } else if (e.target.innerHTML == 'C') {
      string = "";
      document.querySelector('input').value = string;
    } else if (e.target.innerHTML == 'Del') {
      string = del();
      document.querySelector('input').value = string;
    } else {
      console.log(e.target)
      string = string + e.target.innerHTML;
      document.querySelector('input').value = string;
    }
  })
})

<style>@import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');
body {
  font-family: 'Macondo', cursive;
  border: 1px solid rgb(220, 255, 48);
  border-radius: 5px;
  width: 500px;
  height: 600px;
  margin-left: 500px;
  margin-top: 53px;
  overflow: hidden;
}

.text-h {
  text-align: center;
  text-decoration: underline;
  border: 2px solid rgb(141, 237, 52);
  background: rgb(54, 254, 54);
  border-radius: 5px;
  padding: 25px;
  margin: -2px;
}

.button,
.del {
  padding: 18px;
  margin: 0 5px;
  border: 2px solid black;
  border-radius: 40%;
  cursor: pointer;
  font-size: 20px;
  background-color: rgb(252, 255, 89);
  box-shadow: 5px rgb(126, 122, 122);
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  flex-direction: column;
}


/* .bg-red{ */


/* background-color: red; */


/* } */

.row {
  margin: 8px 0px;
}

.row input {
  padding: 15px 9px;
  border: 2px solid black;
  border-radius: 17px;
  font-size: 19px;
  background-color: rgb(205, 255, 145);
}

#last {
  margin-left: 13px;
}

#first-row {
  font-size: 1px;
  width: 285px;
  justify-content: center;
  display: flex;
  margin-top: 9px;
  margin-bottom: 5px;
}

.first {
  margin: auto;
}

#M+,
#M- {
  width: 54px;
}

button #m,
#c-2,
#del,
#c-4,
#add,
#div,
#mult {
  background-color: rgb(255, 188, 2);
}

#eval {
  width: 122px;
  border-radius: 30px;
  background-color: rgb(53, 137, 255);
}

#C {
  background-color: rgb(255, 42, 0);
}

#mult {
  width: 53px;
}

#div {
  width: 51px;
}

.container {
  background-color: rgb(121, 255, 100);
  padding: 24px;
}

@media screen and (max-width: 400px) {
  body {
    width: 324px;
    margin: auto;
    margin-top: 17px;
    overflow: scroll;
  }
}

</style>

<h1 class="text-h">Welcome To My Calculator !</h1>
<div class="container m-a mw-20 flex flex-col bg-red">
  <div class="row">
    <input id="screen" class="input" type="text" />
  </div>
  <div id="first-row" class="row first">
    <button id="C" class="button">C</button>
    <button id="c-2" class="button">%</button>
    <button id="del" class="button">Del</button>
    <button id="c-4" class="button">-</button>
  </div>
  <div class="row">
    <button class="button">7</button>
    <button class="button">8</button>
    <button class="button">9</button>
    <button id="mult" class="button">*</button>
  </div>
  <div class="row">
    <button class="button">4</button>
    <button class="button">5</button>
    <button class="button">6</button>
    <button id="div" class="button">/</button>
  </div>
  <div class="row">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button id="add" class="button">+</button>
  </div>
  <div class="row right">
    <button class="button">0</button>
    <button class="button">.</button>
    <button id="eval" class="button">=</button>

  </div>
</div>

Solution

You can use string = string.slice(0, -1); for it. It will delete last character that is entered.

That way you don't even need del() method.

See the code below:

let string = '';
// let Delete = document.getElementsByClassName('del');
let screen = document.getElementById('screen');
let buttons = document.querySelectorAll('.button');

Array.from(buttons).forEach((button) => {
  button.addEventListener('click', (e) => {
    if (e.target.innerHTML == '=') {
      string = eval(string);
      document.querySelector('input').value = string;
    } else if (e.target.innerHTML == 'C') {
      string = "";
      document.querySelector('input').value = string;
    } else if (e.target.innerHTML == 'Del') {
      string = string.slice(0, -1);
      document.querySelector('input').value = string;
    } else {
      console.log(e.target)
      string = string + e.target.innerHTML;
      document.querySelector('input').value = string;
    }
  })
})

<style>@import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');
body {
  font-family: 'Macondo', cursive;
  border: 1px solid rgb(220, 255, 48);
  border-radius: 5px;
  width: 500px;
  height: 600px;
  margin-left: 500px;
  margin-top: 53px;
  overflow: hidden;
}

.text-h {
  text-align: center;
  text-decoration: underline;
  border: 2px solid rgb(141, 237, 52);
  background: rgb(54, 254, 54);
  border-radius: 5px;
  padding: 25px;
  margin: -2px;
}

.button,
.del {
  padding: 18px;
  margin: 0 5px;
  border: 2px solid black;
  border-radius: 40%;
  cursor: pointer;
  font-size: 20px;
  background-color: rgb(252, 255, 89);
  box-shadow: 5px rgb(126, 122, 122);
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-col {
  flex-direction: column;
}


/* .bg-red{ */


/* background-color: red; */


/* } */

.row {
  margin: 8px 0px;
}

.row input {
  padding: 15px 9px;
  border: 2px solid black;
  border-radius: 17px;
  font-size: 19px;
  background-color: rgb(205, 255, 145);
}

#last {
  margin-left: 13px;
}

#first-row {
  font-size: 1px;
  width: 285px;
  justify-content: center;
  display: flex;
  margin-top: 9px;
  margin-bottom: 5px;
}

.first {
  margin: auto;
}

#M+,
#M- {
  width: 54px;
}

button #m,
#c-2,
#del,
#c-4,
#add,
#div,
#mult {
  background-color: rgb(255, 188, 2);
}

#eval {
  width: 122px;
  border-radius: 30px;
  background-color: rgb(53, 137, 255);
}

#C {
  background-color: rgb(255, 42, 0);
}

#mult {
  width: 53px;
}

#div {
  width: 51px;
}

.container {
  background-color: rgb(121, 255, 100);
  padding: 24px;
}

@media screen and (max-width: 400px) {
  body {
    width: 324px;
    margin: auto;
    margin-top: 17px;
    overflow: scroll;
  }
}

</style>

<h1 class="text-h">Welcome To My Calculator !</h1>
<div class="container m-a mw-20 flex flex-col bg-red">
  <div class="row">
    <input id="screen" class="input" type="text" />
  </div>
  <div id="first-row" class="row first">
    <button id="C" class="button">C</button>
    <button id="c-2" class="button">%</button>
    <button id="del" class="button">Del</button>
    <button id="c-4" class="button">-</button>
  </div>
  <div class="row">
    <button class="button">7</button>
    <button class="button">8</button>
    <button class="button">9</button>
    <button id="mult" class="button">*</button>
  </div>
  <div class="row">
    <button class="button">4</button>
    <button class="button">5</button>
    <button class="button">6</button>
    <button id="div" class="button">/</button>
  </div>
  <div class="row">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    <button id="add" class="button">+</button>
  </div>
  <div class="row right">
    <button class="button">0</button>
    <button class="button">.</button>
    <button id="eval" class="button">=</button>

  </div>
</div>