Question

我正在开发我的第一个JavaScript游戏，我想在＆lt;中显示某些属性。 p为H.标签。每个＆的ID。 p为H. tag将等于“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

您需要定位正确的元素。目前，您正在定位＆＃39; show-Bob＆＃39;而不是＆＃39; show-name＆＃39;你想做什么。首先，从密钥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>

note，这在IE7及以下版本中无效。

Answer 2

您的属性为Bob。因此putItHere = "'show-"+attribute+"'"相当于：putItHere = "'show-"+"Bob"+"'"，这没有任何意义。

您应该收到以下错误Uncaught TypeError: Cannot set property 'innerHTML' of null。

这应该做：

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

display("name","Bob");

以下是Fiddle。

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

2 个答案: