JavaScript:console.log工作但不返回是有原因的吗

Question

我正试图让一个复选框返回1或0，这取决于它是否被选中。我很难理解为什么if函数中的return不起作用。如果我使用console.log而不是返回，那么输出是正确的。选中时为1未选中时为0。对于return，checked将被跳过，它只返回else语句，因此无论是checked还是unchecked，它都是0。一般来说，我是编码的新手，所以我确信我错过了一些简单的东西。有什么想法吗？谢谢

document.getElementById("materialLoaded").addEventListener('input', materialCheck);
function materialCheck() {
if (this.checked) {
return 1;
} else {
return 0;
}
}

Answer 1

确信你不会看到任何东西，因为你没有告诉你的程序告诉你任何事情。你告诉它在函数中返回一个值，但要查看它返回的值，你必须调用该函数。例如，要查看返回值，请使用窗口调用函数：

document.getElementById("materialLoaded").addEventListener('input', materialCheck);
function materialCheck() {
if (this.checked) {
return 1;
} else {
return 0;
}
window.alert(materialCheck());
}

javascript是面向对象的，你不能写函数，它应该自己工作，它必须被调用。console.log之所以有效，是因为那里有一个对象，它是控制台，例如调用函数或显示您所要求的内容(例如：console.log("hello"((

Answer 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>