我正在尝试将内部HTML脚本元素转换为外部Javascript文件。 <script>元素在HTML中完美运行，但我不明白我需要更改它才能从外部Javascript文件中工作。我现在所拥有的“火” - 它确实生成随机图像 - 但它显示全屏，阻止整个网站。
这是工作HTML <script>
<script class="randomad" type="text/javascript">
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>';
random_img[1] //....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]);
</script>
在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]);
}
目标是通过外部JavaScript文件随机生成超链接图像。图像需要足够小以适应旁边的列，但现在它们是浏览器的大小。我非常感谢你解决这个问题的任何帮助！
你有很多权利，但你错过了一些小事。
您还可以通过多种方式完成此任务。以下内容尽可能接近原始代码。
在HTML <head>元素中，一个非常小的变化。
<script defer src="javascript/rec_images.js"></script>
为什么defer超过async？好吧，that will depend on what you are doing，但在大多数情况下，基于小代码样本，我相信这将是最好的匹配。
在javascript/rec_images.js，一些变化。
/*
Pass the div id to the function to add the image.
*/
function random_ad(divId) {
var random_img = [
{link:"http://www.antares-sellier.com/en/",
image:"javascript/js_images/antares.jpg"},
// add as many as you want
{link:"http://www.scesports.org/",
image:"javascript/js_images/sces.jpg"}
];
var random_number = Math.floor((Math.random()*random_img.length));
var d = document.getElementById(divId);
// always best to check the element was found.
if (d) {
var a = document.createElement("a");
var i = document.createElement("img");
a.setAttribute("href",random_img[random_number].link);
i.setAttribute("src",random_img[random_number].image);
a.appendChild(i);
d.appendChild(a);
}
}
回到HTML，你有<div id="firstads"></div>，在底部，在关闭</body></html>之前，添加：
<script>
window.onload = function() {
// pass the div id to the function
random_ad("firstads");
}
</script>
</body>
</html>
编辑：
改为使用createElement，which is encouraged肯定。以前使用innerHTML懒惰。
同意Tigger。
您在这里使用document.write（）： https://www.w3schools.com/jsref/met_doc_write.asp
'write（）方法将HTML表达式或JavaScript代码写入文档。 'write（）方法主要用于测试：如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。
document.write（）有时很有用，但通常不是标准做法。您需要设置innerHTML或添加HTML DOM元素。您可以将它添加到正文的末尾，如下所示：
// ... random_img setups
// replacing document.write
document.querySelector('body').innerHTML += (random_img[random_number]);
您可以使用querySelector，getElementById，getElementsByClassName和其他选择器。我推荐一般的querySelector，谷歌的例子:)。
另外，如果你有时间，我建议你检查document.createElement，并附加函数来添加元素到标记，而不是按文本设置innerHTML。以下是为什么不鼓励使用innerHTML的一些答案： Why is "element.innerHTML+=" bad code?