1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="box" type="text">

    <button id="addition">+</button>
    <button id="add">=</button>
    <button id="reset">reset</button>

    <p id="result"></p>

    <script>
    
        var inputText = window.document.querySelector("#box");
        var buttonAddition = window.document.querySelector("#addition");
        var buttonAdd = window.document.querySelector("#add");
        var result = window.document.querySelector("#result");
        var reset = window.document.querySelector("#reset");

        var number1, number2, sum;

        buttonAddition.addEventListener("click", function()
        {
            number1 = inputText.value;
            inputText.value = "";
        });

        buttonAdd.addEventListener("click", function()
        {
            number2 = inputText.value;
            sum = Number(number1) + Number(number2);
            result.textContent = sum;
        });

        reset.addEventListener("click", function()
        {

        });

    </script>
</body>
</html>

Bom no exemplo acima tem uma calculadora bem simples. Mas uma dúvida que eu tenho e não é de hoje seria como apagar caractere por caractere dentro do input, por exemplo nessa calculadora o usuário digitou o número 1500, ao pressionar uma vez o botão reset ele vai apagar o último caractere, se eu pressionar duas vezes ele apaga os 2 últimos e assim ele vai remover sempre o último caractere do valor do input ao ser pressionado o botão reset. Como que eu faria isso?.

1 Resposta 1

3

Usando o método .substr() você pode alterar o valor do campo pegando do primeiro caractere até o penúltimo e reinserindo no campo:

.substr(0, elemento.value.length-1);

Inicia-se do 0 e vai até o penúltimo, que é o .length-1:

var inputText = window.document.querySelector("#box");
var buttonAddition = window.document.querySelector("#addition");
var buttonAdd = window.document.querySelector("#add");
var result = window.document.querySelector("#result");
var reset = window.document.querySelector("#reset");

var number1, number2, sum;

buttonAddition.addEventListener("click", function()
{
   number1 = inputText.value;
   inputText.value = "";
});

buttonAdd.addEventListener("click", function()
{
   number2 = inputText.value;
   sum = Number(number1) + Number(number2);
   result.textContent = sum;
});

reset.addEventListener("click", function()
{
   if(inputText.value.length){
      inputText.value = inputText.value.substr(0, inputText.value.length -1);
      inputText.focus();
   }
});
<input id="box" type="text">

<button id="addition">+</button>
<button id="add">=</button>
<button id="reset">reset</button>

<p id="result"></p>

O inputText.focus(); é opcional, para manter o cursor no campo.

1
  • 1
    Você é o cara!, perfeito era isso mesmo que eu queria, obrigado! 16/07/2019 às 2:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .