0

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 class="calculator">

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


        <div class="container">
            <div  class="previous-operand"></div>
            <div  class="current-operand"></div>

        <div class="buttons-col1">
            <div class="button">MC</div>
            <div class="button">MS</div>
            <div class="button">MR</div>
            <div class="button">M+</div>
            <div class="button">M-</div>
        </div>

        <!-- <div class="buttons-row">
            <div class="button">C</div>
            <div class="button">AC</div>
            <div class="button"><-</div>
            <div class="button button-rvt">Rvt</div>
        </div> -->

        <div class="buttons-row1">
            <div></div>
            <div data-number class="button">7</div>
            <div data-number class="button">4</div>
            <div data-number class="button">1</div>
            <div data-number class="button">0</div>
          
        </div>

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

        <div class="buttons-row2">
            <div class="button button-rvt">Rvt</div>
            <div class="button">(</div>
            <div class="button">)</div>
            <div data-equals id="result-btn" class="button button-calculate">=</div>
            
          
        </div>


        <!-- <div class="buttons-grid-main">
            <div class="button">7</div>
            <div class="button">4</div>
            <div class="button">1</div>
            <div class="button">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?

Martinez
  • 65
  • 5

2 Answers2

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

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

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" class="button"><-</div>

JS :

else if (e.target.dataset.action === "delete")
Xupitan
  • 1,601
  • 1
  • 8
  • 12
0

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.

Daniel
  • 33
  • 3