How to delete character by character from input when pressing the button?

Asked

Viewed 160 times

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>

Good in the above example has a very simple calculator. But a doubt I have and is not today would be like deleting character by character within the input, for example in this calculator the user has entered the number 1500, by pressing the button once reset it will erase the last character, if I press twice it erases the last 2 and so it will always remove the last character from the value of the input when the button is pressed reset. How would I do that?.

javascript html

1 answer

3


Using the method .substr() you can change the field value by taking from the first character to the penultimate and reinserting into the field:

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

Begins from 0 and goes to the next-to-last, which is .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>

The inputText.focus(); is optional, to keep the cursor in the field.

  • 1

    You’re the man! , perfect was just what I wanted, thank you!

Browser other questions tagged javascript html

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