如何正确使用getElementById？遇方法失效问题求排查

核心问题1：getElementById参数错误 #

你的代码里downButton的获取逻辑写错了，把目标id写成了"up"，导致两个变量指向同一个按钮元素，自然无法操作id为down的按钮：

// 错误代码
const downButton = document.getElementById("up");
// 正确写法
const downButton = document.getElementById("down");

核心问题2：错误使用setAttribute设置样式属性 #

width、left、top属于CSS样式属性，不是HTML原生属性，直接用setAttribute设置不会生效。你需要通过元素的style对象来修改样式，同时注意按钮默认是行内元素，要使用left/top这类定位属性，需要先给元素设置position值（比如absolute或relative）。

修正后的完整代码 #

final.js：

const upButton = document.getElementById("up");
const downButton = document.getElementById("down");

initialize();

function initialize(){
    // 设置宽度（通过style对象）
    upButton.style.width = "300px";
    console.log(upButton.style.width);
    
    // 先设置定位方式，否则left/top不生效
    upButton.style.position = "absolute";
    upButton.style.left = `${Math.floor(Math.random() * 1000)}px`;

    downButton.style.position = "absolute";
    downButton.style.top = `${Math.floor(Math.random() * 1000)}px`;
    downButton.style.left = `${Math.floor(Math.random() * 1000)}px`;
}

正确使用getElementById的要点 #

• 确保参数是目标元素的准确id值，id在HTML文档中必须唯一，浏览器只会返回第一个匹配id的元素。
• 确保脚本执行时，目标元素已经被浏览器解析（你的代码里脚本放在HTML末尾，这一点是对的，能保证元素已加载）。
• 如果需要操作元素样式，直接使用element.style.xxx的方式，而非setAttribute（仅用于设置HTML原生属性，比如src、alt等）。

内容的提问来源于stack exchange，提问作者Harry Potter