javascript substring like backspace

Question

HI in the code down below i have a html setup with buttons for a password input form:

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8">
      <title>Log in form</title>
      <link href="style.css" rel="stylesheet">
      <script src="ui.js"></script>
   </head>
   <body>
      <div id="main">
         <div id="top_bar"><tx id="tx">Bildschirmsperre</tx></div>
         <div id="infotext">Wählen sie Ihre PIN aus</div><br />
         <div id="pin"></div><button id="btnback" onclick="changepin(10)">&larr;</button><br />

         <div id="tasten">
            <button class="button" onclick="changepin(1)">1</button>
            <button class="button" onclick="changepin(2)">2</button>
            <button class="button" onclick="changepin(3)">3</button><br />
            <button class="button" onclick="changepin(4)">4</button>
            <button class="button" onclick="changepin(5)">5</button>
            <button class="button" onclick="changepin(6)">6</button><br />
            <button class="button" onclick="changepin(7)">7</button>
            <button class="button" onclick="changepin(8)">8</button>
            <button class="button" onclick="changepin(9)">9</button><br />
            <button class="button" onclick="changepin(0)">0</button>
         </div>
         <div id="bottom_bar">   <text id="text_left">ABBRECHEN</text>  <zeichen id="zeichen">|</zeichen>   <text id="text_right">WEITER</text> </div>
      </div>
   </body>
</html>

There is no css so it looks awful right now and it contains words in germany so please ignore them.

so far i have this javascript:

var count = 0;

function changepin(value) {
   var pin = document.getElementById("pin");
   if(value != 10 && count < 4){
      pin.innerHTML += value;
      count++;
   }else if(value == 10){
      count--;
      pin.innerHTML = pin.value.substr(0, count);
   }
}

the typing in (max 4 letters) works fine but i have no idea how to make the backspace i tried a little bit but it isnt working.

Could anyone pls help?

Thanks!

Reinstate Monica Cellio · Accepted Answer · 2016-08-01T14:17:55.250

You almost had it, but the use of the count variable is both unnecessary and potentially confusing. This does what you need, without it...

// only do this once - no need to find the element every time
var pin = document.getElementById("pin");

function changepin(value) {
    var currentPin = pin.innerText;

    // if user pressed the back button then remove the last character
    if (value == 10) {
        pin.innerText = currentPin.substr(0, currentPin.length - 1);
    }
    // else if the current pin is long enough then just exit without doing anything else
    else if (currentPin.length > 3) {
        return;
    }
    // else add the new character to the pin
    else {
        pin.innerText = currentPin + value;
    }
}

As you can see I also changed innerHTML to innerText. In this case it makes no difference, but it's good habit to always refer to the correct property, so you want to set the text, not the HTML.

What if `pin` only is 2 characters long and you still want to use backspace? Edit: That's what I'm talking about, here's your upvote! — Jeff Noel, Aug 01 '16 at 14:16

score 1 · Answer 2 · answered Aug 01 '16 at 14:15

The problem is that you are trying to get the value of <div id="pin">. A div has no value. Exchange the following line:

pin.innerHTML = pin.value.substr(0, count);

With this one:

pin.innerHTML = pin.innerHTML.substr(0, count);

Also, there are some things you should clean up. For example, only use valid html tags. <text> and <zeichen> are not.

score 1 · Answer 3 · answered Aug 01 '16 at 14:37

1

You need to change your js function like that

function changepin(value) {
  var pin = document.getElementById("pin");
  if (value != 10 && count < 4) {
    pin.innerHTML += value;
    count++;
  } else if (value == 10) {
    count--;
    pin.innerHTML = pin.innerHTML.substring(0, pin.innerHTML.length - 1);
  }
}

answered Aug 01 '16 at 14:37

Nihat Mert

96
3

Thank you very much, that was exactly what i was looking for! – Kamil Aug 01 '16 at 14:40

javascript substring like backspace

3 Answers3