如何将内部 <script> 标记转换为外部 Javascript 文件？（用于随机图像生成器）答案

【问题标题】：How do I convert an internal <script> tag to an external Javascript file? (for random image generator)如何将内部 <script> 标记转换为外部 Javascript 文件？（用于随机图像生成器）
【发布时间】：2019-04-21 03:10:56
【问题描述】：

我正在尝试将内部 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 文件随机生成超链接图像。图像需要足够小以放入旁边的列中，但现在它们是浏览器的大小。对于解决此问题，我非常感谢您的帮助！

【问题讨论】：

标签： javascript html random type-conversion generator

【解决方案1】：

同意跳跳虎。

您在此处使用 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，例如google :)。

另外，如果您有时间，我建议您查看 document.createElement，并使用 append 函数将元素添加到标签，而不是通过文本设置 innerHTML。以下是不鼓励使用 innerHTML 的一些答案：
Why is "element.innerHTML+=" bad code?

【讨论】：

感谢您的解释，我一定会记住的！

【解决方案2】：

你有很多正确的，但你错过了一些小东西。

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

在 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。

【讨论】：

这是有道理的，而且效果很好。非常感谢！