Блог

Главная - Вопросы по программированию - JavaScript: есть ли причина, по которой консоль.журнал работает, но не возвращается?

JavaScript: есть ли причина, по которой консоль.журнал работает, но не возвращается?

#javascript #return #iif-function

#javascript #Возврат #iif-функция

Вопрос:

Я пытаюсь установить флажок для возврата 1 или 0 в зависимости от того, установлен он или нет. Мне трудно понять, почему возврат в этой функции if не работает. Если бы я использовал консоль.log вместо return вывод правильный. 1, если флажок установлен, 0, если флажок снят. при возврате checked пропускается и возвращает только оператор else, поэтому значение 0 либо установлено, либо снято. Я новичок в кодировании в целом, поэтому я уверен, что здесь не хватает чего-то простого. Есть идеи? Спасибо!

 document.getElementById("materialLoaded").addEventListener('input', materialCheck);

function materialCheck() {

    if (this.checked) {
        return 1;
    } else {
        return 0;
    }
}

Комментарии:

1. Что именно требуется для возврата?

2. Куда он должен вернуться? Вы сообщаете браузеру: пожалуйста, запустите эту функцию в будущем , когда произойдет событие ввода. Результат появляется спустя долгое время после вызова addEventListener

3. console.log войдет в консоль (как следует из названия), return просто завершая функцию и передавая значение тому, что вызывало эту функцию. Поскольку вы не используете это возвращаемое значение, вы ничего не увидите, кроме того, что оно создано.

4. Это похоже на проблему X / Y.

5. Да, я думаю, это проблема X / Y. Я пытаюсь изменить цвет элемента HTML с красного на зеленый, когда установлены три флажка. Итак, что я пытаюсь сделать с возвратом, так это передавать новое значение флажка каждый раз, когда регистрируется новый ввод, чтобы я мог использовать значение в другой функции, которая изменит цвет элемента HTML, когда будут установлены все три флажка. В любом случае, это моя мысль. Это может быть совершенно неправильный способ приблизиться к чему-то подобному, но я подумал, что попробую и посмотрю, к чему это приведет.

Ответ №1:

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

  document.getElementById("materialLoaded").addEventListener('input', materialCheck);

function materialCheck() {

if (this.checked) {
    return 1;
} else {
    return 0;
}

window.alert(materialCheck());
 }

javascript объектно-ориентирован, вы не можете написать функцию, и она должна работать сама по себе, ее нужно вызвать.
консоль.журнал работает, потому что там есть объект, который является консолью, вызывающей функцию, например, или отображающей то, что вы просили (например: console.log(«привет»))

Комментарии:

1. Теперь я понимаю. Извините, я на самом деле просто исключил функцию вызова из кода, приведенного в вопросе. Я вручную указывал консоли запустить materialCheck() и забыл добавить его в сам код для примера. тем не менее, он не возвращает ничего, что меня смущает.

2. @maccollaflower позвольте мне объяснить, в основном «return» дает вам значение (возвращает значение), но не отображает его на вашем экране, в отличие от console. журнал, в котором отображается значение, возвращаемое в вашей консоли

Ответ №2:

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

Основная концепция:

 const wrapper = document.querySelector("#wrapper");

const validateCheckboxes = function() {
  const checked = document.querySelectorAll(".chk:checked");
  const isValid = checked.length === 3;
  wrapper.classList.toggle("valid", isValid);
};

wrapper.addEventListener("change", validateCheckboxes);  
 .valid {
  background-color: green;
}  
 <div id="wrapper">
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
  <input type="checkbox" class="chk" />
</div>

Комментарии:

1. Черт возьми, ха-ха, это намного чище и проще, чем то, что я пытался сделать. Также имеет гораздо больше смысла. Спасибо epascarello!