Chrome与Edge无法识别修改按钮及textarea文字颜色的JavaScript代码

嘿，我帮你找出代码失效的原因啦！你的这段代码没法在Chrome和Edge中生效，主要有两个关键问题，我给你拆解并附上修复方案：

问题分析 #

• DOM加载顺序错误：你的JS代码写在了<textarea>元素的前面。浏览器是从上到下解析HTML的，当JS执行时，页面里还不存在id="textcolor"的元素，这时候document.getElementById('textcolor')会返回null，后续修改样式的代码自然就报错失效了。
• 冗余代码无意义：你重复定义了textcolor2变量，但完全没用到它，这部分代码可以直接删掉，不影响功能还能让代码更简洁。

修复后的代码方案 #

方案1：把JS放在元素之后（简单直接） #

这种方式让浏览器先解析出textarea元素，再执行JS代码：

<textarea id="textcolor"></textarea>
<script>
var textcolor = document.getElementById('textcolor');
textcolor.style.background = 'black';
textcolor.style.color = 'white';
</script>

方案2：监听DOM加载完成事件（更通用） #

如果你的JS代码需要放在页面头部，推荐用这种方式，确保所有DOM元素加载完成后再执行操作：

<script>
document.addEventListener('DOMContentLoaded', function() {
  var textcolor = document.getElementById('textcolor');
  textcolor.style.background = 'black';
  textcolor.style.color = 'white';
});
</script>
<textarea id="textcolor"></textarea>

这样修改后，Chrome和Edge就能正常识别代码，实现把textarea背景改成黑色、文字改成白色的效果啦！

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