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

【问题标题】：Changing innerHTML to value from div's Id captured by it's ClassName将 innerHTML 更改为由其 ClassName 捕获的 div 的 Id 的值
【发布时间】：2015-10-31 10:54:07
【问题描述】：

我有一些按钮 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();
}

它应该像这样工作：

【问题讨论】：

您是否有理由不只是传递要直接显示的值，如onclick="enterPIN(4);？
只是我还是你弄错了 numKeyId？可能只有我一个人，已经很晚了，我刚刚完成了我的工作。编辑：是的，我想这只是我，对不起。 EDIT2：如果您不想像丹尼尔建议的那样输入enterPIN(4);，为什么不更多地依赖this？只需获取一个值并输入element.innerHTML += "4"?

标签： javascript html innerhtml getelementbyid getelementsbyclassname

【解决方案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);
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

看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，然后从处理程序中调用它们。

【讨论】：

感谢额外的删除功能。

【解决方案4】：

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

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

这比在可以直接传递信息时尝试拉出按下的按钮要简单得多。

【讨论】：

是的，它可以工作 - 感谢@Daniel Black - 但是因为我编写了这样的函数来输出所有这些按钮值数字。当我的代码试图做的时候，如何通过 for-loop 等来做到这一点:)？如何正确编写我的代码以使其正常工作？