javascript - 使用参数 (JavaScript) 将变量直接传递到 getElementById

Question

我正在开发我的第一个 JavaScript 游戏，我想在

标记内显示某些属性。每个 < p> 标记的 ID 将等于“show-”和属性名称(有关属性“name”的信息，请参阅下面的示例)。

但是我在获取 getElementById 的语法时遇到了问题。有什么建议吗？

<p id="show-name"></p>

<script>
    name = "Bob";
    function display(attribute) {
        putItHere = "'show-"+attribute+"'"
        document.getElementById(putItHere).innerHTML = attribute;
    }
    display(name);
</script>

Answer 1

您需要定位正确的元素。目前，您的目标是“show-Bob”，而不是“show-name”。因此，首先从键 name 生成 id，然后为该元素分配一个值。

var name = "Bob";
function display(key, value) {
    var putItHere = "show-"+ key;
    document.getElementById(putItHere).innerHTML = value;
}
display('name', name);

note 请记住，ID 在文档中应该是唯一的

但是，另一种方法是使用特定标签来定位所有元素，例如

<div data-id="name"></div>
<div data-id="name"></div>
<div data-id="name"></div>

<script type="text/javascript">
    var name = "Bob";
    function display(key, value) {
        var putItHere = "show-"+ key;
        var elements = document.querySelectorAll('div[data-id="'+key+'"]');
        for(var eid in elements) {
            var element = elements[eid];
            element.innerHTML = value;
        }
    }
    display('name', name);
</script>

注意，这在 IE7 及更低版本中不起作用。