Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   проблемы с выносом скрипта во внешний файл (https://javascript.ru/forum/misc/66208-problemy-s-vynosom-skripta-vo-vneshnijj-fajjl.html)

j0hnik 01.12.2016 13:11

проблемы с выносом скрипта во внешний файл
 
Добрый день уважаемые JS программисты.
Есть скрипт который считает сумму по чекбоксам

Код:

var allChbx = [],
    out = document.querySelector('output');
[].forEach.call(document.querySelectorAll('.block'), function(group){
    var main = group.querySelector('.main'),
        chbx = group.querySelectorAll('input[type=checkbox]:not(.main)');
    allChbx = allChbx.concat([].slice.call(chbx));
    main.addEventListener('change', function(){
        var stat = this.checked;
        [].forEach.call(chbx, function(el){
            el.checked = stat;
        });
        reCalc();
    });
    [].forEach.call(chbx, function(el){
        el.addEventListener('change',function(){
            var cnt = [].filter.call(chbx, function(el){
                return el.checked == true;
            }).length;
            main.checked = cnt > 0;
            reCalc();
        }, false);
    });
});
function reCalc(){
    var total = 0;
    allChbx.forEach(function(c){
        total += c.checked == true ? +c.dataset.price : 0;
    });
    out.innerHTML = '' + total + '';
}

Внутри HTML работает без проблем, но если вынести во внешний файл работать перестает.
думаю что в HTML его как то надо дополнительно запускать
вот беда только не знаю какой строчкой. ПОМОГИТЕ!!

(пути все у меня правильные прописаны Алертом проверял. тоесть подключается но не работает)

ruslan_mart 01.12.2016 13:24

j0hnik, потому что Вы скорей всего подключили скрипт в head, и на момент выполнения скрипта элементов DOM ещё не существует, соответственно ничего и не срабатывает.

Оберните весь скрипт в:

window.addEventListener('DOMContentLoaded', function() {

   //Ваш скрипт

});


И будет Вам счастье.

ksa 01.12.2016 13:24

Цитата:

Сообщение от j0hnik
Внутри HTML работает без проблем, но если вынести во внешний файл работать перестает

Вангую, что тех элементов просто нет на странице на момент работы этого скрипта...


j0hnik 01.12.2016 13:34

Цитата:

Сообщение от ksa (Сообщение 436713)
Вангую, что тех элементов просто нет на странице на момент работы этого скрипта...


И как лучше поступить?

j0hnik 01.12.2016 13:35

Цитата:

Сообщение от Ruslan_xDD (Сообщение 436712)
j0hnik, потому что Вы скорей всего подключили скрипт в head, и на момент выполнения скрипта элементов DOM ещё не существует, соответственно ничего и не срабатывает.

Оберните весь скрипт в:

window.addEventListener('DOMContentLoaded', function() {

   //Ваш скрипт

});


И будет Вам счастье.

Не помогло

ksa 01.12.2016 14:27

Цитата:

Сообщение от j0hnik
И как лучше поступить?

Как вариант, подключать файл скрипта не в
<head>...</head>

А в самом низу страницы (перед закрытием body)...

j0hnik 01.12.2016 14:34

Цитата:

Сообщение от ksa (Сообщение 436728)
Как вариант, подключать файл скрипта не в
<head>...</head>

А в самом низу страницы (перед закрытием body)...

Думаешь я не пробовал =( не помогает!

ksa 01.12.2016 14:40

Цитата:

Сообщение от j0hnik
Думаешь я не пробовал

Мой хрустальный шар и так уже весь стерт... :D
Может уже начнешь делать тестовый пример?

ksa 01.12.2016 14:41

Цитата:

Сообщение от j0hnik
не помогает!

Вангую дальше...
Наверное все эти элементы подгружаются потом. Т.о. без делегирования у тебя так ничего работать и не будет...


j0hnik 01.12.2016 14:57

Цитата:

Сообщение от ksa (Сообщение 436737)
Мой хрустальный шар и так уже весь стерт... :D
Может уже начнешь делать тестовый пример?

http://jsfiddle.net/alegraft/q24z7zym/2/
вот и пример! взял отсюда


Часовой пояс GMT +3, время: 12:26.