将 innerHTML 更改为由其 ClassName 捕获的 div 的 Id 的值

Question

我有一些按钮 1-9，我想在名为 "screen" 的 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

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

<input type="button" value="1" onclick="enterPIN(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

for 循环第一次迭代（使用 i=0），它将到达 return 语句，函数将在一次迭代后退出，而不会到达脚本的最后部分。

如果您只需稍微更改 HTML，将值作为参数传递给 enterPin:

，就可以用更少的代码完成此操作

<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 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 更改为由其 ClassName 捕获的 div 的 Id 的值

Changing innerHTML to value from div's Id captured by it's ClassName

html

javascript

innerhtml

getelementbyid

getelementsbyclassname