Javascript-форум - проблемы с выносом скрипта во внешний файл

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)

проблемы с выносом скрипта во внешний файл

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

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

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

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

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

   //Ваш скрипт

});

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

Цитата:

Сообщение от j0hnik

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

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

Цитата:

Сообщение от ksa (Сообщение 436713)

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

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

Цитата:

Сообщение от Ruslan_xDD (Сообщение 436712)

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

   //Ваш скрипт

});

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

Не помогло

Цитата:

Сообщение от j0hnik

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

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

<head>...</head>

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

Цитата:

Сообщение от ksa (Сообщение 436728)

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

<head>...</head>

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

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

Цитата:

Сообщение от j0hnik

Думаешь я не пробовал

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

Цитата:

Сообщение от j0hnik

не помогает!

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

Цитата:

Сообщение от ksa (Сообщение 436737)

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

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

Цитата:

Сообщение от j0hnik

http://jsfiddle.net/alegraft/q24z7zym/2/
вот и пример!

Бивас, тест! (с)

tmp.js

function myFunc (){
	var rez = 0; 
	with (document){
		if (getElementById ('b1').checked) rez += parseFloat(getElementById('s1').innerHTML);
		if (getElementById ('b2').checked) rez += parseFloat(getElementById('s2').innerHTML);
		if (getElementById ('b3').checked) rez += parseFloat(getElementById('s3').innerHTML);
		if (getElementById ('b4').checked) rez += parseFloat(getElementById('s4').innerHTML);
		getElementById ('r').innerHTML = rez;
	}
}

tmp.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<script src='tmp.js'></script>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input id="b1" onclick="myFunc ()" type="hidden" name="" value="" />
<span hidden id="s1">100</span>
</div>
<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input type="checkbox" name="" value="" />
<input id="b2" onclick="myFunc()" type="hidden" name="" value="" />
<span hidden id="s2">100</span>
</div>
<div style="border: 1px solid black; padding: 10px; margin: 10px;">
<input id="b3" onclick="myFunc()" type="checkbox" name="" value="" />
<span hidden id="s3">100</span>
<input id="b4" onclick="myFunc()" type="checkbox" name="" value="" />
<span hidden id="s4">100</span>
</div>
<div class="formInputBlock">
<br />
<b>Итоговая сумма:</b> <span id="r" name="sum">0</span> руб.
</div>
</body>
</html>

У меня все работает... :)
Хоть в файлах... Хоть на странице... Все одинаково.

http://jsfiddle.net/0yrLaaL8/3/

ой простите не тот пример!
выше правильный

РРЕБЯТА ЗАРАБОТАЛО! всех вас люблю!

Сам видать где-то накосячил, заново весь код скопировал и все пошло, есть теперь другая проблема, стилизовал чекбоксы http://surfingbird.ru/surf/bkpB8Dcc3#.WD_ydoqg-Hs
и все перестало работать.
буду думать как исправить.

никто с такой проблемой не сталкивался??
как только стилизуем чекбоксы считать перестает