Calculator: fix delete button-CodePudding

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 >Welcome To My Calculator !</h1>
<div >
  <div >
    <input id="screen"  type="text" />
  </div>
  <div id="first-row" >
    <button id="C" >C</button>
    <button id="c-2" >%</button>
    <button id="del" >Del</button>
    <button id="c-4" >-</button>
  </div>
  <div >
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <button id="mult" >*</button>
  </div>
  <div >
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <button id="div" >/</button>
  </div>
  <div >
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <button id="add" > </button>
  </div>
  <div >
    <button >0</button>
    <button >.</button>
    <button id="eval" >=</button>

  </div>
</div>

CodePudding user response：

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 >Welcome To My Calculator !</h1>
<div >
  <div >
    <input id="screen"  type="text" />
  </div>
  <div id="first-row" >
    <button id="C" >C</button>
    <button id="c-2" >%</button>
    <button id="del" >Del</button>
    <button id="c-4" >-</button>
  </div>
  <div >
    <button >7</button>
    <button >8</button>
    <button >9</button>
    <button id="mult" >*</button>
  </div>
  <div >
    <button >4</button>
    <button >5</button>
    <button >6</button>
    <button id="div" >/</button>
  </div>
  <div >
    <button >1</button>
    <button >2</button>
    <button >3</button>
    <button id="add" > </button>
  </div>
  <div >
    <button >0</button>
    <button >.</button>
    <button id="eval" >=</button>

  </div>
</div>

CodePudding user response：

function del(){
    screen.value = screen.value.length - 1;
}

The code inside the above function del() is just decrementing the length of the string by 1.

What is supposed to be done here is slicing the string by removing the last character from the string whenever del button is clicked.

And the reason of displaying 'undefined' is that the del() function is not returning any value to the function call.

So the below code helps while using del() function:

function del(){
    screen.value = screen.value.slice(0, -1);
    console.log(`Screen Value : ${screen.value}`)
    return screen.value;
}

But we do not need del() function as well.

string = string.slice(0, -1);
document.querySelector("input").value = string;

The above lines can do our work.

Please refer to the complete script below.

    let string = "";
    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;
            }
        });
    });