JavaScript/HTML中无法同时修改元素颜色与文本内容的问题

你的代码存在两个关键问题：

1. .textContent前的点号属于语法错误——前一行document.getElementById("test").style.color = "magenta";已经是完整的赋值语句，下一行直接写.textContent没有对应的操作对象，浏览器会直接报错。
2. 就算去掉点号，textContent = "Goodbye"是给全局变量赋值，根本没关联到目标DOM元素，所以文本不会发生变化。

正确写法（推荐新手使用，逻辑清晰） #

先把目标元素存入变量，后续所有操作都基于这个变量执行：

function doSomething(){
    // 获取目标元素并存储到变量中
    const testElement = document.getElementById("test");
    // 修改元素文字颜色
    testElement.style.color = "magenta";
    // 修改元素显示的文本内容
    testElement.textContent = "Goodbye";
}

原代码失效的原因 #

document.getElementById("test")会返回你要操作的DOM元素对象，但当你执行xxx.style.color = "magenta"时，这条语句的返回值是字符串"magenta"，而非原来的元素对象，所以没法通过链式调用的方式直接接着操作textContent。用变量存储元素的方式，既可以避免重复获取元素的性能浪费，也能清晰锁定操作对象。

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