[英]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.