我如何转换内部<script> tag to an external Javascript file? (for random image generator)

Question

我正在尝试将内部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文件中，我已将script元素替换为：

           <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文件随机生成的超链接图像。 图像必须足够小以适合放在旁边的列中，但是现在它们是浏览器的大小。 我非常感谢您为解决此问题提供任何帮助！

Answer 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，并附加函数以将元素添加到标签中，而不要通过文本设置innerHTML。 以下是不鼓励使用innerHTML的一些答案：
为什么“ element.innerHTML + =”错误的代码？

Answer 2

您有很多权利，但是您缺少一些小东西。

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

在HTML <head>元素中，进行了非常小的更改。

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

为什么要defer async ？ 好吧，这将取决于您的工作，但是在大多数情况下，并根据小的代码样本，我认为这将是最佳的选择。

在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 ，这是肯定的做法。 以前使用innerHTML很懒。

我如何转换内部<script> tag to an external Javascript file? (for random image generator)

问题描述

2 个解决方案

解决方案1
1 2019-04-21 07:51:56

解决方案2
0 已采纳 2019-04-21 07:27:31

我如何转换内部<script> tag to an external Javascript file? (for random image generator)

问题描述

2 个解决方案

解决方案1 1 2019-04-21 07:51:56

解决方案2 0 已采纳 2019-04-21 07:27:31

解决方案1
1 2019-04-21 07:51:56

解决方案2
0 已采纳 2019-04-21 07:27:31