如何转换内部<；脚本>；标记到外部Javascript文件？（用于随机图像生成器）

我正在尝试将内部HTML脚本元素转换为外部Javascript文件。

元素在HTML中工作得非常好，但我不明白为了使它从外部Javascript文件工作，需要做哪些更改。我现在所拥有的“火焰”——它确实会生成随机图像——但它会全屏显示，封锁整个网站

下面是工作HTML

var total_images=7；
var random_number=Math.floor（（Math.random（）*总图像））；
var random_img=新数组（）；
随机_img[0]=''；
为简洁起见，此处不包括随机\u img[1]/..1-5//
随机_img[6]=''；
文件写入（随机数）；

在HTML文件中，我将脚本元素替换为：

           <div id="firstads"></div>

并补充说

<script src="javascript/rec_images.js" async></script> 

到头部元素

在Javascript中，我删除了脚本标记并添加了一个函数，但我对Javascript非常陌生，不知道还需要添加或更改什么才能使转换正常工作

以下是出现故障的Javascript代码：

window.onload = random_ad;

 function random_ad () {
     document.getElementById("firstads");
    var total_images = 7;
    var random_number = Math.floor((Math.random()*total_images));
    var random_img = new Array();
    random_img[0] = '<a href="http://www.antares-sellier.com/en/"><img src="javascript/js_images/antares.jpg"></a>';
//....1-5 excluded here for brevity//
    random_img[6] = '<a href="http://www.scesports.org/"><img src="javascript/js_images/sces.jpg"></a>';
    document.write(random_img[random_number]);

 }

window.onload=随机加载；
随机函数{
文件.getElementById（“firstads”）；
var total_images=7；
var random_number=Math.floor（（Math.random（）*总图像））；
var random_img=新数组（）；
随机_img[0]=''；
//为了简洁起见，此处不包括1-5//
随机_img[6]=''；
文件写入（随机数）；
}

---

目标是通过外部JavaScript文件在中随机生成超链接图像。图像需要足够小才能放在旁边的一列中，但现在它们的大小与浏览器相当。我真的非常感谢任何帮助修复这个

你有很多权利，但你错过了一些小东西

您还可以通过多种不同的方式完成此任务。以下内容尽可能接近您的原始代码

在HTML

元素中，一个非常小的更改

<script defer src="javascript/rec_images.js"></script>

回到

HTML

，在底部的

，在关闭

之前，添加以下内容：

<script>
window.onload = function() {
    // pass the div id to the function
    random_ad("firstads");
}
</script>
</body>
</html>

window.onload=函数（）{
//将div id传递给函数
随机广告（“第一广告”）；
}

编辑：

当然，更改为使用

createElement

。以前在使用

innerHTML

时很懒。

同意跳跳虎的说法

您正在使用document.write（）此处：

'write（）方法将HTML表达式或JavaScript代码写入文档。'
'write（）方法主要用于测试：如果在HTML文档完全加载后使用，它将删除所有现有HTML。'

document.write（）有时很有用，但通常不是标准做法。 您需要设置innerHTML或附加一个HTMLDOM元素。可以将其添加到主体的末尾，如下所示：

// ... random_img setups
// replacing document.write
document.querySelector('body').innerHTML += (random_img[random_number]);

您可以使用querySelector、getElementById、GetElementsByCassName和其他选择器。我通常推荐querySelector，例如google:）

另外，如果您有时间，我建议您签出document.createElement，并使用append函数将元素添加到标记中，而不是按文本设置innerHTML。以下是为什么不鼓励使用innerHTML的一些答案：

---

这是有道理的，而且效果很好。非常感谢你！谢谢你的解释，我一定会记住的！

<script>
window.onload = function() {
    // pass the div id to the function
    random_ad("firstads");
}
</script>
</body>
</html>

// ... random_img setups
// replacing document.write
document.querySelector('body').innerHTML += (random_img[random_number]);