JavaScript：console.log 工作但不返回是否有原因？

Question

我試圖讓一個復選框返回 1 或 0，具體取決於它是否被選中。 我很難理解為什么這個 if 函數的返回不起作用。 如果我使用 console.log 而不是 return 輸出是正確的。 選中時為 1 未選中時為 0。 使用 return，checked 被跳過，它只返回 else 語句，所以它是 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>