javascript - 将 innerHTML 更改为由它的 ClassName 捕获的 div 的 Id 的值

Question

我有一些按钮 1-9，我想在名为“屏幕”的 div 上显示它们的编号。所以我写了这样的代码，但它似乎不起作用。

带有这些按钮的一段 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();
}

它应该像这样工作:

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