I created a function to remove the last string but this bug

Asked

Viewed 41 times

0

I am creating a calculator and I did the function of removing the last number typed, but there is a bug that if I put to add, subtract, etc... with something (before clicking on =) it will start to remove only equal numbers, for example, I typed the following numbers 12121212+12121212, will remove the last 2 normally, but from there, will begin to remove only the numbers 1, then the numbers 2

Html code:



<!DOCTYPE html>
<html lang="pt-br">
  <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" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Calculadora</title>
  </head>
  <body>
    <main class="calculadora container">
      
      <section class="resultado container">
        <section class="mode"></section>
        <input id="result" value="" type="text" readonly />
      </section>
      
      <div class="teclas container">
        <input type="button" value="x'" onclick="botao('**')" />
        <input type="button" id="del" value="DEL" onclick="retirar()" />
        <input type="button" value="%" onclick="botao(value)" />
        <input type="button" value="C" onclick="limpar()" />
        <input type="button" value="7" onclick="botao(value)" />
        <input type="button" value="8" onclick="botao(value)" />
        <input type="button" value="9" onclick="botao(value)" />
        <input
          type="button"
          value="x"
          onclick="botao('*')"
          class="operadores-basicos"
        />
        <input type="button" value="4" onclick="botao(value)" />
        <input type="button" value="5" onclick="botao(value)" />
        <input type="button" value="6" onclick="botao(value)" />
        <input
          type="button"
          value="-"
          onclick="botao(value)"
          class="operadores-basicos"
        />
        <input type="button" value="1" onclick="botao(value)" />
        <input type="button" value="2" onclick="botao(value)" />
        <input type="button" value="3" onclick="botao(value)" />
        <input
          type="button"
          value="/"
          onclick="botao(value)"
          class="operadores-basicos"
        />
        <input type="button" value="0" onclick="botao(value)" />
        <input type="button" value="." onclick="botao(value)" />
        <input type="button" value="=" onclick="calc()" id="igual" />
        <input
          type="button"
          value="+"
          onclick="botao(value)"
          class="operadores-basicos"
        />
      </div>
    </main>

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

My JS:



const numeros = document.querySelectorAll('input')
const telaResultado = document.querySelector('#result')
const buttonDarkMode = document.querySelector('.mode')
let conta;

function botao(value) {
    conta = telaResultado.value += value
} 

function limpar() {
  telaResultado.value = ""
}

function calc() {

  const resultado = eval(conta)
  telaResultado.value = resultado
}

function retirar() {
  const palavraCompleta = telaResultado.value
  const ultimaLetra = palavraCompleta.substr(telaResultado.value.length-1)
  console.log(ultimaLetra)
  
  telaResultado.value = telaResultado.value.replace(ultimaLetra, "")
}

buttonDarkMode.addEventListener('click', function() {
  document.documentElement.classList.toggle('ativo')
  buttonDarkMode.classList.toggle('ativo')
})

Remember, I’m a beginner in js

javascript html css html5 css3

1 answer

0


Replace your replace with a substring

 function retirar() {
      const palavraCompleta = telaResultado.value
      const ultimaLetra = palavraCompleta.substring(0, telaResultado.value.length - 1)
      console.log(ultimaLetra)
    
      telaResultado.value = ultimaLetra
    }

  • I replaced it and the bug continues

  • In fact I had only replaced, the name, copied his code and was very obliged

Browser other questions tagged javascript html css html5 css3

You are not signed in. Login or sign up in order to post.