javascript - addEventListener ("change"...输入工作改变innerHTML的值上升但不下降

Question

这个问题已经有答案了:

Using Javascript to compare two input numbers in HTML? (4 个回答)

已关闭 3 年前。

我有一个 div block ，其中的值需要在更改输入值时进行调整。当输入值上升时它工作得很好，但当输入值下降时它不会改变。也许我在我的逻辑中忽略了一些愚蠢的事情。

var quanityAmount = document.getElementById("quantity");
var letterDisplay = document.getElementById("display");
quanityAmount.addEventListener("change", function() {
  var quanityValue = quanityAmount.value;
  if (quanityValue === 1) {
    letterDisplay.innerHTML = "a";
  } else if (quanityValue >= 2) {
    letterDisplay.innerHTML = "b";
  }
});

<input type="number" id="quantity" name="quantity" value="1" min="1" >

<div id="display">a</div>

我有一个console.log(quanityvalue)并且该值确实发生变化并检测到，例如 1、2 并返回到 1。

Answer 1

输入的值是一个字符串，因此"1"!== 1。需要将其转换为数字。

var quanityAmount = document.getElementById("quantity");
var letterDisplay = document.getElementById("display");
quanityAmount.addEventListener("change", function() {
  var quanityValue = +quanityAmount.value;
  if (quanityValue === 1) {
    letterDisplay.innerHTML = "a";
  } else if (quanityValue >= 2) {
    letterDisplay.innerHTML = "b";
  }
});

<input type="number" id="quantity" name="quantity" value="1" min="1" >

<div id="display">a</div>