How to remove last element in calculator?-CodePudding

I want to remove last element when I click on '<-' button. But for some reason, it's not working what I have. I am removing the last number from div using

result.toString().slice(0, -1);

For some reason, it is not working.

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">

    <!--Google fonts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <!--Google fonts-->

</head>
<body>
    
    <section >

      
        <div data-current-operand   id="result"></div>


        <div >
            <div  ></div>
            <div  ></div>

        <div >
            <div >MC</div>
            <div >MS</div>
            <div >MR</div>
            <div >M </div>
            <div >M-</div>
        </div>

        <!-- <div >
            <div >C</div>
            <div >AC</div>
            <div ><-</div>
            <div >Rvt</div>
        </div> -->

        <div >
            <div></div>
            <div data-number >7</div>
            <div data-number >4</div>
            <div data-number >1</div>
            <div data-number >0</div>
          
        </div>

        <div >
            <div data-all-clear id="clear" >C</div>
            <div data-number >8</div>
            <div data-number >5</div>
            <div data-number >2</div>
            <div >.</div>
          
        </div>
        <div >
            <div data-all-clear >AC</div>
            <div data-number >9</div>
            <div data-number >6</div>
            <div data-number >3</div>
            <div > /-</div>
          
        </div>
        
        <div >
            <div data-delete ><-</div>
            <div data-operation  id="divide">/</div>
            <div data-operation  id="times">*</div>
            <div data-operation  id="minus">-</div>
            <div data-operation  id="plus"> </div>
          
        </div>

        <div >
            <div >Rvt</div>
            <div >(</div>
            <div >)</div>
            <div data-equals id="result-btn" >=</div>
            
          
        </div>


        <!-- <div >
            <div >7</div>
            <div >4</div>
            <div >1</div>
            <div >0</div>
        </div> -->

        
        </div>
    
    </section>


    <script src="./js/script.js"></script>
</body>
</html>

const calculator=document.querySelector('.calculator');

const result=document.querySelector('.result-field');

const buttons=document.querySelectorAll('.button');


const buttonClick=(e)=>{
  if(e.target.innerHTML==='C')
  result.innerHTML='';
  else if(e.target.innerHTML==='AC')
  result.innerHTML='';

  else if (e.target.innerHTML === '=') 
  result.innerHTML = eval(result.innerHTML);
  else if (result.innerHTML === '0') 
  // Если textarea содержит только "0", то
  // стереть "0" и записать
  // значения кнопки в текстовое поле
  result.innerHTML = e.target.innerHTML;
  else if(e.target.innerHTML==='<-'){
   
    let res=result.toString().slice(0, -1);
    result.innerHTML=res;

  console.log('true');
  }
  // result.toString().slice(0, -1);
  else 
  result.innerHTML  = e.target.innerHTML;

}


buttons.forEach((button)=>{
  button.addEventListener('click',buttonClick);
});

Also, I posted code here: https://codesandbox.io/s/frosty-sun-94d6js?file=/src/index.js

Can someone help me please, what am I doing wrong?

CodePudding user response：

You should use result.textContent instead of result.innerHTML for this kind of scenario. innerHTML contains the actual HTML, which might include a lot of whitespace, or other odd characters. If you want to modify the text content of an HTML element it's best to use .textContent so you're only working with the actual text.

CodePudding user response：

else if(e.target.innerHTML === '<-')

else if condition of you return false because convert text < : <-

you can check it in there define less than and greater than symbols

you can use dataset for checking action of buttons instead of result.innerHTML same as :

HTML :

<div data-action="delete" ><-</div>

JS :

else if (e.target.innerHTML === "delete")