使用参数（JavaScript）将变量直接传递到getElementById

我正在开发我的第一个JavaScript游戏，我想在标记中显示某些属性。每个标记的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>

name=“Bob”；
功能显示（属性）{
putItHere=“'show-“+属性+””
document.getElementById（putItHere.innerHTML=属性；
}
显示器（名称）；

您需要针对正确的元素。目前，您的目标是“显示Bob”，而不是“显示姓名”您试图做什么。因此，首先从键

name

生成id，然后为该元素赋值

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

注意

请记住，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>

var name=“Bob”；
功能显示（键、值）{
var putItHere=“显示-”+键；
var elements=document.querySelectorAll（'div[data id=“”+key+””）；
for（元素中的变量eid）{
var元素=元素[eid]；
element.innerHTML=值；
}
}
显示（'名称'，名称）；

---

注意

这在IE7及以下版本中不起作用。

您的属性是

Bob

。因此，

putItHere=“'show-”+属性+”

相当于：

putItHere=“'show-”+“Bob”+”

，这毫无意义

您应该得到以下错误

未捕获的TypeError:无法将属性'innerHTML'设置为null

这应该做到：

function display(attrname, val){
    document.querySelector('#show-'+attrname).innerText=val;
}

display("name","Bob");

---

以下是要使用的id。

id应该是show-Bob no？改为display（“name”）。请记住，id在文档中应该是唯一的。