JavaScript问题：HTML输入值无法从函数返回的原因解析

嘿，这个问题其实很多刚接触前端的朋友都会碰到，我来给你把逻辑掰明白！

核心原因：调用环境的差异 #

当你通过HTML元素的onclick属性调用函数时，浏览器只会执行函数，但会忽略函数的返回值——它不会主动把这个返回值打印到控制台，也不会展示给用户。而在控制台直接调用函数时，控制台的默认行为就是把函数的返回值输出出来，这就是为什么同一个函数在两种场景下表现不同的关键。

咱们逐个看你的四个变体：

• 变体1：函数本身是完全正确的，它确实会根据输入返回true或false，但因为是通过onclick调用，这个返回值没有被任何代码接收或展示，所以你“感觉”它没返回。实际上函数已经完成了计算并返回了值，只是没人去处理这个结果而已。
• 变体2：这个函数没有依赖返回值，而是主动用console.log()把结果打印到控制台，所以不管是按钮调用还是控制台调用，你都能看到输出——这和返回值无关，是函数主动输出了内容。
• 变体3：和变体1本质一样，哪怕你把结果赋值给变量再返回，onclick调用时返回值还是会被浏览器忽略。函数本身是正确返回了结果的，只是没有后续代码去使用这个返回值。
• 变体4：在控制台直接调用函数时，控制台会自动捕获函数的返回值并显示出来，所以你能看到结果。这和函数代码无关，纯粹是控制台的默认行为导致的。

怎么解决？ #

如果你想在按钮调用时看到或使用函数的返回值，需要主动去处理它，举几个例子：

1. 在函数内部主动打印返回值

修改变体1的函数，在return前添加控制台输出：

function test(input) {
  const result = input % 3 == 0 || input % 7 == 0;
  console.log(result); // 主动打印结果
  return result;
}

2. 在onclick中接收返回值并处理

修改HTML的onclick属性，把返回值存到变量后打印：

<input type="button" class="btn" value="test" onclick="let res = test(document.querySelector('.input').value); console.log(res)">

3. 把结果展示到页面上

比如添加一个元素用来显示结果：

<div id="result"></div>
<input type="button" class="btn" value="test" onclick="document.getElementById('result').textContent = test(document.querySelector('.input').value)">

这样不管是哪种方式，你都能看到函数的返回值啦！

内容的提问来源于stack exchange，提问作者Jason Bergland