使用参数 (JavaScript) 将变量直接传递给 getElementById
Pass a variable directly into getElementById using the parameter (JavaScript)
我正在开发我的第一个 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>
您需要定位正确的元素。目前您的目标是 '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>
note
这在 IE7 及以下版本中不起作用。
您的属性是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 游戏,我想在 < 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>
您需要定位正确的元素。目前您的目标是 '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>
note
这在 IE7 及以下版本中不起作用。
您的属性是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 可以玩的。