gpt4 book ai didi

javascript insidehtml 不会设置值

转载 作者:行者123 更新时间:2023-11-28 14:22:28 24 4
gpt4 key购买 nike

我正在尝试生成随机颜色代码,并且我想将该颜色代码显示到 SPAN 中。尝试了下面的代码,

<body>
<script type="text/javascript">
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
randomColor = "#" + ("000000" + randomColor).slice(-6);
document.bgColor = randomColor;
document.getElementById("hexRandomColor").innerHTML = randomColor;
</script>

<div class="container">
<span id="hexRandomColor"></span>
<div>
</body>

但是,它(document.getElementById("hexRandomColor").innerHTML = randomColor;)没有在span中显示颜色代码。当我将脚本代码移到正文之外时,它起作用了。但是,我想将脚本代码保留在 body 元素内。如何显示颜色代码?

最佳答案

您的脚本在 DOM 完全加载之前执行,这会导致元素在尝试设置样式时不可用并抛出错误:

Uncaught TypeError: Cannot set property 'innerHTML' of null

要解决此问题,您可以将脚本放在正文的底部,或者使用 DOMContentLoaded 包装代码。这将确保只有在 DOM 完全加载后才会执行里面的代码。

<body>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var randomColor = Math.floor(Math.random() * 16777215).toString(16);
randomColor = "#" + ("000000" + randomColor).slice(-6);
document.bgColor = randomColor;
document.getElementById("hexRandomColor").innerHTML = randomColor;
});
</script>

<div class="container">
<span id="hexRandomColor"></span>
</div>
</body>

关于javascript insidehtml 不会设置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54764954/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com