Question

我怎么能说“你明白了！”当我的输入不仅是5，还是小于或等于5时，弹出消息？

document.getElementById("my-button").onclick = function() {
  if (document.getElementById("my-input").value == "5") {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

Answer 1

您必须使用Number将值转换为数字，然后使用<=进行比较。

document.getElementById("my-button").onclick = function() {
  if (Number(document.getElementById("my-input").value) <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

Answer 2

比较之前，需要将输入值（字符串）转换为数字。

在这种情况下，您可以使用parseInt

document.getElementById("my-button").onclick = function() {
  if (parseInt(document.getElementById("my-input").value, 10) <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers?
<input type="text" id="my-input">
<button id="my-button">Submit</button>

Answer 3

您的问题有一个小问题，就是输入的类型是text而不是number。您可以通过执行<input type=number id="my-input">来更改输入的类型。如果要保留类型，则必须检查输入的内容是否为数字。

在任何一种情况下，您都必须将输入的值从字符串转换为数字，因为大多数情况下使用字符串进行数字运算是错误的（在少数情况下，结果相同）是错误的。使用文本和数字之间的唯一区别是必须检查输入的值是否有效，可以在转换后使用isNaN进行操作。我通常更喜欢强制JavaScript通过使用- 0而不是parseInt或parseFloat来转换文本，因为它比较严格，不会将"123test"转换为123。

这是使用数字的解决方案

document.getElementById("my-button").addEventListener("click", function() {
  if (document.getElementById("my-input").value - 0 <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
});

<input type="number" id="my-input">
<button id="my-button">Submit</button>

这是使用文本的解决方案

document.getElementById("my-button").addEventListener("click", function() {
  var value = document.getElementById("my-input").value - 0;
  if (isNaN(value)) {
    alert("Not a number");
  } else if (value <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
});

<input type="text" id="my-input">
<button id="my-button">Submit</button>

Answer 4

实际上，当您访问<input>的值是一个字符串时。您不能在需要使用{b> >,<,>=,<=

将其转换为数字的strings之间使用parseInt()

document.getElementById("my-button").onclick = function() {
  let value = parseInt(document.getElementById("my-input").value)
  if (value <= 5) {
    alert("You got it!")
  } else {
    alert("Opps, wrong number. Please try again.")
  }
}

What is my favorite numbers? 
<input type="text" id="my-input">

<button id="my-button">Submit</button>

Answer 5

您从输入类型获取的值是字符串，因此您需要使用[ParseInt，Number]方法将其转换为数字，然后您才能进行比较，并且一切正常，因此我认为你好

let button = document.getElementById("my-button");
let value = document.getElementById("my-input");
button.on('click', function () {
    if (Number(value) <= 5) {
        alert("You got it!")
    } else {
        alert("Opps, wrong number. Please try again.")
    }
});

有个不错的游戏

努力制作一些数字猜谜游戏

5 个答案: