Question

在下面的代码中我有一个html设置，其中包含用于输入密码的按钮：

<!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>

没有css所以它现在看起来很糟糕它包含德国的单词所以请忽略它们。

到目前为止，我有这个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);
   }
}

输入（最多4个字母）工作正常，但我不知道如何制作退格我尝试了一点但它不工作。

有人可以帮忙吗？

谢谢！

Answer 1

你几乎拥有它，但使用count变量既不必要也可能令人困惑。这就是你需要的，没有它......

// 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;
    }
}

如您所见，我还将innerHTML更改为innerText。在这种情况下它没有任何区别，但总是引用正确的属性是一个好习惯，所以你想设置文本，而不是HTML。

Answer 2

问题在于您试图获得<div id="pin">的值。 div没有价值。交换以下行：

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

有了这个：

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

此外，还有一些事情你应该清理。例如，仅使用有效的html标记。 <text>和<zeichen>不是。

Answer 3

你需要像那样改变你的js功能

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);
  }
}

像退格一样的javascript子串

3 个答案: