你的代码是正确的。也许您的问题是您没有将 ID 传递给AddBorder
函数,或者具有该 ID 的元素不存在。或者,您可能正在通过浏览器的 DOM 访问相关元素之前运行您的函数。
自 ECMAScript 2015 起,您还可以使用模板文字(又名模板字符串):
document.getElementById(`horseThumb_${id}`).className = "hand positionLeft";
要识别第一种情况或确定第二种情况的原因,请将这些添加为函数内的第一行:
alert('ID number: ' + id);
alert('Return value of gEBI: ' + document.getElementById('horseThumb_' + id));
每次调用该函数时都会打开弹出窗口,其值为 ,id
返回值为document.getElementById
。如果您获得undefined
ID 号弹出窗口,则您没有将参数传递给该函数。如果 ID 不存在,您会在第一个弹出窗口中得到您的(不正确的?)ID 号,但null
在第二个弹出窗口中得到。
如果您的网页看起来像这样,则会发生第三种情况,AddBorder
并在页面仍在加载时尝试运行:
<head>
<title>My Web Page</title>
<script>
function AddBorder(id) {
...
}
AddBorder(42); // Won't work; the page hasn't completely loaded yet!
</script>
</head>
要解决此问题,请将所有使用 AddBorder 的代码放在onload
事件处理程序中:
// Can only have one of these per page
window.onload = function() {
...
AddBorder(42);
...
}
// Or can have any number of these on a page
function doWhatever() {
...
AddBorder(42);
...
}
if(window.addEventListener) window.addEventListener('load', doWhatever, false);
else window.attachEvent('onload', doWhatever);