Как преобразовать внутренний тег <script>во внешний файл Javascript? (для генератора случайных изображений) - PullRequest
Новая
       15

Как преобразовать внутренний тег <script>во внешний файл Javascript? (для генератора случайных изображений)

0 голосов
/ 21 апреля 2019

Я пытаюсь преобразовать внутренний элемент сценария 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>

к элементу head.

В 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.Изображения должны быть достаточно маленькими, чтобы помещаться в отдельный столбец, но сейчас они соответствуют размеру браузера.Буду очень признателен за помощь в исправлении этого!

Ответы [ 2 ]

1 голос
/ 21 апреля 2019

Согласен с 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 в целом, google для примеров:).

Кроме того, если у вас есть время, я бы порекомендовал вам проверить document.createElement и добавить функцию для добавления элементов в тег, вместо установки innerHTMLпо тексту.Вот несколько ответов на вопрос, почему не рекомендуется использовать innerHTML:
Почему «element.innerHTML + =» плохой код?

0 голосов
/ 21 апреля 2019

У тебя много прав, но тебе не хватает нескольких мелочей.

Существует также несколько различных способов выполнения этой задачи. Следующее максимально приближено к вашему исходному коду.

В элементе 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>

Edit:

Перейдите на использование createElement, , которое рекомендуется наверняка. Раньше ленился, используя innerHTML.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...