Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.12.2016, 13:11
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

проблемы с выносом скрипта во внешний файл
Добрый день уважаемые 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 его как то надо дополнительно запускать
вот беда только не знаю какой строчкой. ПОМОГИТЕ!!

(пути все у меня правильные прописаны Алертом проверял. тоесть подключается но не работает)
Ответить с цитированием
  #2 (permalink)  
Старый 01.12.2016, 13:24
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

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

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

   //Ваш скрипт

});


И будет Вам счастье.
Ответить с цитированием
  #3 (permalink)  
Старый 01.12.2016, 13:24
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от j0hnik
Внутри HTML работает без проблем, но если вынести во внешний файл работать перестает
Вангую, что тех элементов просто нет на странице на момент работы этого скрипта...

Ответить с цитированием
  #4 (permalink)  
Старый 01.12.2016, 13:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

И как лучше поступить?
Ответить с цитированием
  #5 (permalink)  
Старый 01.12.2016, 13:35
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

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

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

   //Ваш скрипт

});


И будет Вам счастье.
Не помогло
Ответить с цитированием
  #6 (permalink)  
Старый 01.12.2016, 14:27
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от j0hnik
И как лучше поступить?
Как вариант, подключать файл скрипта не в
<head>...</head>

А в самом низу страницы (перед закрытием body)...
Ответить с цитированием
  #7 (permalink)  
Старый 01.12.2016, 14:34
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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

А в самом низу страницы (перед закрытием body)...
Думаешь я не пробовал =( не помогает!
Ответить с цитированием
  #8 (permalink)  
Старый 01.12.2016, 14:40
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от j0hnik
Думаешь я не пробовал
Мой хрустальный шар и так уже весь стерт...
Может уже начнешь делать тестовый пример?
Ответить с цитированием
  #9 (permalink)  
Старый 01.12.2016, 14:41
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

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

Ответить с цитированием
  #10 (permalink)  
Старый 01.12.2016, 14:57
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Сообщение от ksa Посмотреть сообщение
Мой хрустальный шар и так уже весь стерт...
Может уже начнешь делать тестовый пример?
http://jsfiddle.net/alegraft/q24z7zym/2/
вот и пример! взял отсюда
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Внешний css файл faiq (X)HTML/CSS 11 08.10.2017 03:18
внешний файл badfoks Общие вопросы Javascript 13 14.10.2012 15:05
Внешний файл в IE София Internet Explorer 9 17.04.2011 15:30
подгрузить файл скрипта на событие LamerNo1 Events/DOM/Window 35 02.06.2009 14:18
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37