Question

我正试图就我为什么会有时将功能输出到控制台日志但不会提供返回值的问题进行最终解释。

特别是在这种情况下，我试图从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>

Answer 1

我不确定您的期望。您正在运行这段代码

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))"

Answer 2

在第二个按钮中将其输出到控制台的原因是您的代码告诉了它

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)
}

}

Answer 3

您正在尝试对字符串进行数学运算。将<input>类型属性从文本更改为数字。

编辑：可能需要添加parseInt（）才能真正转换为整数类型，而不是字符串类型。

Javascript：从HTML输入返回值的问题

3 个答案: