Как оптимизировать создание элемента?

Question

[Genri_Rus]

Нужно создать 2 скрипта одновременно

Вот пример:

if (window.location.href.indexOf('index') != -1) {
     scripts('js/scripts.js', 'js/scripts2.js');
}

function scripts(scriptSrcOne, scriptSrcTwo) {
            var newScript = document.createElement('script');
            newScript.src = [scriptSrcOne, scriptSrcTwo];

            document.getElementsByTagName("body")[0].appendChild(newScript);
        }

Так не работает, т.к. document.createElement один, нужно цикл ?

Comments

[hellcaster]

1. В функции script написан бред. Вы создаете переменную newScript, создаете элемент script, а потом переопределяете переменную newScript тем самим элементом script
   
2. Это невозможно, так как не нужно. Зачем Вам создавать одновременно 2 скрипта, а потом добавлять, если в конце все равно сначала добавиться какой-то один, а потом второй?
   

[Genri_Rus]

muryn.official, мне нужно подгружать скрипты только на определённой странице

Ка это можно сделать ?

Answer 1

[Сергей c0re]

• В аттрибут src элемента script нельзя записывать массив!
  
• Вы передаете два параметра (адреса), соответственно необходимо создать два элемента script и оба добавить в body
  

как-то так:

function loadScripts(arrScr) {
  arrScr.forEach((src) => {
    var scr = document.createElement('script');
    scr.src = src;
    document.body.appendChild(scr);
  })
}

if (window.location.href.indexOf('index') != -1) {
     loadScripts(['js/scripts.js', 'js/scripts2.js']);
}

Comments

[Genri_Rus]

Спасибо за ответ

Но у меня выскакивает ошибка:

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

[Сергей c0re]

Genri_Rus, ну так исправьте ее!
опечатался...

исправил.

[Genri_Rus]

Сергей, спасибо

А без стрелочной функции тут работать не будет, типа так ?

function loadScripts(arrScr) {
       arrScr.forEach(function(src) {
            var scr = document.createElement('script');
            scr.src = src;
            document.body.appendChild(scr);
        })
    }

[Сергей c0re]

Genri_Rus, почему же не будет? будет! и это легко проверяется, переписыванием и выполнением.
просто с ней короче и можно, почему бы и нет? )

[Genri_Rus]

Сергей, просто у меня ошибки:

Uncaught TypeError: arrScr.forEach is not a function

Если так:

function loadScripts(arrScr) {
       arrScr.forEach(function(src) {
            var scr = document.createElement('script');
            scr.src = src;
            document.body.appendChild(scr);
        })
    }

[Genri_Rus]

Сергей, у меня через function() не работает

Я прочитал, что:

Функциональный контекст – это причудливый способ сказать, к чему относится this. for, for/in и for/of сохраняют значение this из внешней области видимости, но обратный вызов forEach() будет иметь другое значение this, если вы не используете стрелочную функцию.

Т.е. foreach в данном случае не подойдет ?

[Genri_Rus]

Сергей, т.е. в данном случае только так ?

function loadScripts(arrScr, arrScr2) {
      [arrScr, arrScr2].forEach(function(src) {

      var scr = document.createElement('script');

      scr.src = src;

      document.body.appendChild(scr);
   });
}

[Сергей c0re]

Genri_Rus, Да блин... нет...

Я прочитал, что:

Функциональный контекст – это причудливый способ сказать, к чему относится this. for, for/in и for/of сохраняют значение this из внешней области видимости, но обратный вызов forEach() будет иметь другое значение this, если вы не используете стрелочную функцию.

Да, но в данном случае this не используется же!
и работают прекрасно оба варианта!

function loadScripts(arrScr) {
  arrScr.forEach((src) => {
    var scr = document.createElement('script');
    scr.src = src;
    document.body.appendChild(scr);
  })
}

так и

function loadScripts(arrScr) {
  arrScr.forEach(function(src){
    var scr = document.createElement('script');
    scr.src = src;
    document.body.appendChild(scr);
  })
}

причем в функцию можно передавать любое количество скриптов!
параметром в виде массива - ['js/scripts.js', 'js/scripts2.js']

[Сергей c0re]

Uncaught TypeError: arrScr.forEach is not a function

Посмотрите каким образом у меня вызывается функция!
параметр функции - массив!

[Сергей c0re]

Genri_Rus, в функцию можно передать хоть целую вереницу...

loadScripts([
  'js/scripts.js',
  'js/scripts2.js',
  'js/scripts3.js',
  'js/scripts4.js',
  'js/scripts5.js',
  'js/scripts6.js'
]);

при этом в самой функции ничего менять уже не надо.

[Genri_Rus]

Сергей, в очередной раз спасибо

А вот так сделать можно ?

function loadScripts(arrScr, arrScr2) {
      [arrScr, arrScr2].forEach(function(src) {

      var scr = document.createElement('script');

      scr.src = src;

      document.body.appendChild(scr);
   });
}

[Сергей c0re]

Genri_Rus, можно, работает же.
но, имхо, так сказать, лаконичнее приведенный мной вариант.
в вашем варианте, если необходимо загрузить
3, 5, 6 скриптов, на каждый случай придется писать свою функцию.