Почему функция постоянно возвращает undefined?

Question

[wbrapist]

Вечер.

Возникла проблема. Написал свой первый JS-говнокод. Проблема при возврате функцией значения.

Есть кнопка - при нажатии на неё открывается меню, в меню есть чекбокс в виде обычного DIV'а. При нажатии на этот чекбокс - пытаюсь обработать текущее состояние, т.е. стоит галочка или нет.

Получается, идёт обработка (внешнего) клик-события, потом внутри него ещё одно клик-событие.

Дело в том, что функция setCheckBox() постоянно возвращает undefined. Почему?

Вот нерабочий код с комментариями в нужных местах. Скорее всего, я не понимаю, что происходит при вызовах функций, в частности, при обработке событий, и в итоге что-то идёт не так, как надо.

Comments

[Ди Ма]

Не слишком ли завернуто для такой простой задачи?
Если нужно просто реагировать на изменения чекбоксов, то это делается не так..

[dicem]

офигеть, 'use strict' юзаете, говнокодить в таком формате непозволительно

[wbrapist]

Ди Ма: это мой первый скрипт.
dicem: почему "офигеть"? Я уверен, туча таких же начинающих, как и я, используют 'use strict' лишь потому, что на learn.javascript ещё в самом начале советуют его использовать, а не потому, что все понимают его прелести (если они есть, разумеется).

[dicem]

wbrapist: я тоже на learn.javascript учил ))) именно там он меня отпугнул, слишком строгий синтаксис, как будто на питоне.

[Coder321]

dicem: зато предотвращает от многих проблем. Да и большинство фреймворков используют его по дефолту.

Answer 1

[Coder321]

В момерт когда вы возвращаете result асинхронное собитие onclick ещу не наступило. При этом, при каждом открытии меню у вас будет создаваться обработчик события что чревато не предсказуемым поведением и утечкой памяти.

Answer 2

[Arman]

Это события и они наступят когда-то в будущем и тогда и надо вызывать след. действие, а не менять свойство что что-то изменилось, либо на это свойство вешать событие что оно изменилось. Для проверки выбран чекбокс или нет можно просто у него и спросить
document.getElementById("checkbox").checked === true

Comments

[wbrapist]

Плохо понимаю о чём Вы. Помимо общих рекомендаций, можете посоветовать что-нибудь более конкретное в данном случае?

[Arman]

wbrapist: где у вас var result; поменяйте на var result = 'test'; должны получить test в ответ. Вы просто регистрирует checkbox.onclick = function() {} действие которое будет когда кто-то кликнет по чекбоксу, вот когда кликнут тогда и надо основное действие делать, например запускать другую функцию, которая будет смотреть значение result и делать что-то, но вызов должен быть внутри checkbox.onclick = function() { // тут}

[wbrapist]

Не понимаю тогда как поступить в мое случае. Если у меня есть событие-клик, в нем я добавляю в HTML парочку DIV-блоков. А во втором событии я использую эти DIV. Т.е. изначально этих блоков нет в разметке. Я ловлю первое событие, добавляю разметку, а как мне второе событие поймать? Ведь оно произойдет когда-то в будущем. Получается, надо событие обрабатывать в другом событии? С другой стороны, если так сделать, то как так выходит, что во время одного события будет и второе. Может его и не будет.

Крч, я запутался в край, может быть потом проступит свет.

Answer 3

[ThunderCat]

во первых, хочу поблагодарить создателей jquery, счастья, здоровья, всех благ и долгих лет жизни. Я глаза сломал и мозг вывихнул, пока натив этот читал. Это к спорам о жквери вс натив жс. Жирный плюс жк за читаемость кода. Я все понял, но это какой-то Содом и Гоморра.
Во вторых - как вам уже Arik намекнул, в функции вы не выполняете этот иф, который так вас раздражает отсутствием реакции. Вы создаете слушателя, который при срабатывании клика отработает этот иф. По этому var result = setCheckBox(); выдает андефайнед, с резалтам внутри ничего не происходит.
В третьих - выставить в фиддл код и не вписать хтмл и цсс - это вообще за гранью добра и зла.

Answer 4

[dicem]

Попробуй занулить переменную при объявлении, или любое дефолтное значение ему запихать типа
var result = true;

Comments

[wbrapist]

Если так сделать, то возвращается значение. В этом и проблема. Что if else- блок игнорируется.

Answer 5

[wbrapist]

Сделал немного по-другому. При клике на меню отрабатывало событие - там добавлялся HTML, повесил второе клик-событие не отдельно где-то в коде, а сделал его в виде атрибута (т.е. вместо старой разметки):

elementAddMenu.innerHTML += '<div class="checkbox"></div>

Немного изменил, добавил обработчик:

elementAddMenu.innerHTML += '<div class="checkbox" onclick="setCheckBox()"></div>

А сама функция при каждом клике вызывается и пишет значение в глобальную переменную.

Пока что только так. Сейчас попробую всё-таки поймать событие, написав обработчик в коде - нужно понять конкретнее, что происходит.

Всем спасибо за разъяснения и непосредственно участие.

UPD
Переделал без использования глобальной переменной, обработчик находится внутри другого.

var checkbox = document.getElementsByClassName('checkbox')[0];

    checkbox.onclick = function() {
      result = setCheckBox(checkbox);
    };