Question

我有一些按钮1-9，我想在div上显示他们的数字＆＃34; screen＆＃34;。所以我写了这样的代码，但似乎没有用。

带有这些按钮的HTML代码：

  <div id="screen"></div>

  <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN();"></div>
  <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN();"></div>
       <div style="clear: both;"></div>
   <div><input type="submit" class="numKey" id="key4" value="4" onclick="enterPIN();"></div>
   <div><input type="submit" class="numKey" id="key5" value="5" onclick="enterPIN();"></div>
       (... AND SO ON ...)

JavaScript代码：

function enterPIN()
{
    for (i=0; i<document.getElementsByClassName("numKey").length; i++)
    {
        var numKeyId = i + " " + document.getElementsByClassName("numKey")[i].id;
        console.log(numKeyId);
        return numKeyId;

    }

    var getElementId = function(numKeyId)
    {
        this.numKeyId = numKeyId;
        document.getElementById("screen").innerHTML = document.getElementsByClassName("numKey")[numKeyId].id;
        console.log("Asdasdasd");
    }
    getElementId();
}

应该是这样的：

exposurePointOfInterest

Answer 1

第一次for循环迭代（使用i=0）时，它将转到return语句，并且只有一次迭代永远不会到达脚本的最后部分，函数将退出。

如果您只是通过将值作为参数添加到enterPin来更改HTML，可以使用更少的代码完成此操作：

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(7);">

或者，正如bcdan所建议的，使用this所以你不必重复自己：

<input type="button" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);">

请注意我已从submit更改为button，因为按下按钮后您实际上并不想提交表单。那你只需要这个JS：

function enterPin(number) {
    screen = document.getElementById("screen");
    screen.innerHTML = screen.innerHTML + String(number);
}

或者，如果你想使用jQuery（并摆脱onclick属性）：

$(".numKey").click(function() {
    screen = $("#screen");
    screen.html(screen.html + this.value);
});

Answer 2

如果您只是需要它来输出您点击的内容，为什么不执行类似

的操作

<html>
    <body>
        <script>
        function enterPIN(value)
        {
            document.getElementById('screen').innerHTML += String(value);
        }

        </script>

        <div id="screen"></div>

        <div><input type="submit" class="numKey" id="key7" value="7" onclick="enterPIN(this.value);"></div>
        <div><input type="submit" class="numKey" id="key8" value="8" onclick="enterPIN(this.value);"></div>
        <div><input type="submit" class="numKey" id="key9" value="9" onclick="enterPIN(this.value);"></div>

    </body>
</html>

Answer 3

最简单的解决方案是在this.value函数参数中传递onclick（如@DanielBeck建议的那样）：

<input type="button" value="1" onclick="enterPIN(this.value)"/>

这比尝试拉出哪个按钮要简单得多，直接传递信息。

Answer 4

查看this example

window.onload = function(){
    var MAX_LEN = 4,
        currentValue = "",
        elScreen = document.getElementById('screen'),
        addDigit = function(digit){
            digit = digit instanceof MouseEvent ? this.value : digit;
            if (elScreen.innerHTML.length < MAX_LEN) elScreen.innerHTML += digit;
        },
        delDigit = function(){
            elScreen.innerHTML = elScreen.innerHTML.slice(0,elScreen.innerHTML.length - 1);
        };
    //setting handlers for numKeys
    numBtns = document.getElementsByClassName('numKey');
    for (var i = 0 ; i < numBtns.length; i++) numBtns[i].onclick = addDigit;
    //setting handler for backKey
    document.getElementById('backKey').onclick = delDigit;
}

不要先考虑事件处理程序。编写简单函数addDigit和delDigit，然后从处理程序调用它们。

将innerHTML更改为div的ID由其IDName捕获的ID

4 个答案: