[英]Javascript: Issues returning a value from a HTML input
我試圖對我的持續存在的問題做出一個明確的解釋，即為什么某個函數有時可以輸出到控制台日志，但不會給出返回值。
特別是在這種情況下，我試圖從HTML輸入中獲取一個值，檢查其是否通過測試，然后返回true或false。
我下面有4種變化。 我想要的是變體1返回。 沒有。 但是，它確實有控制台日志（這是變體2）。但令我感到困惑的是，變體4與變體1的代碼相同，但是從控制台而不是HTML按鈕被調用，但確實返回。
<!DOCTYPE html> <head> <meta charset="UTF-8"> <titleharset="UTF-8"> <title>Check if number passes a test</title> </head> <html> <body> <input type="text" class="input"> <input type="button" class="btn" value="test" onclick="test(document.querySelector('.input').value)"> <input type="text" class="input2"> <input type="button" class="btn" value="test2" onclick="test2(document.querySelector('.input2').value)"> <input type="text" class="input3"> <input type="button" class="btn" value="test3" onclick="test3(document.querySelector('.input3').value)"> </body> <script> // Variation 1: Called from HTML input. Doesn't return function test(input) { if (input % 3 == 0 || input % 7 == 0) { return true } else { return false } } // Variation 2: Called from HTML input. Will console.log function test2(input) { if (input % 3 == 0 || input % 7 == 0) { console.log(true) } else { console.log(false) } } // Variation 3: Called from HTML input. Set to variable (one return) Doesn't return function test3(input) { let result = Boolean; if (input % 3 == 0 || input % 7 == 0) { result = true } else { result = false } return result } // Variation 4: Called from console. Will return! function test4(n) { if (n % 3 == 0 || n % 7 == 0) { return true; } else { return false; } } console.log(test4(15)); console.log(test4(21)); console.log(test4(2)); console.log(test4(11)); </script> </html>
我不確定您的期望。 您正在運行此代碼
onclick="test(document.querySelector('.input').value)"
它調用一個返回true或false的函數。 您無需使用返回的布爾值，因此什么也不會發生。 不會向控制台發送日志，因為您沒有在寫入控制台。
因此，如果您嘗試不提交按鈕，則需要在onclick上添加return以便可以使用它。
onclick="return test(document.querySelector('.input').value)"
如果您希望它像第四個示例一樣寫入控制台，則需要看起來像onclick中的第四個示例
onclick="console.log(test(document.querySelector('.input').value))"
在第二個按鈕中將其輸出到控制台的原因是您的代碼告訴它
function test2(input) {
if (input % 3 == 0 || input % 7 == 0) {
console.log(true)
} else {
console.log(false)
}
}
您的第一個和第三個函數在單擊時會觸發，但是它們返回值，而不是通過控制台記錄它們。
function test(input) {
if (input % 3 == 0 || input % 7 == 0) {
return true
} else {
return false
}
我將輸入類型更改為數字，如下所示：
<input type="number" class="input">
這樣，它就是一個數字，但只是要確保我會用數字包裝器編寫所有三個函數，確保輸入的內容是它們console.loggin的數字。 像這樣
function test2(input) {
var num2 = Number(input);
if (num2 % 3 === 0 || num2 % 7 === 0) {
console.log(true)
} else {
console.log(false)
}
}
您正在嘗試對字符串進行數學運算。 將您的<input>類型屬性從文本更改為數字。
編輯：可能需要添加parseInt（）才能真正轉換為整數類型，而不是字符串類型。
從 JavaScript Function 返回值到 HTML 表單輸入值屬性
[英]Returning Value from JavaScript Function into HTML Form Input Value Attribute
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.