javascript - javascript insertBefore 在 addEventListener 上只有一次

Question

我有一个input type="number"字段，我想控制不插入负数。这样做addEventListener会在您输入该字段的每个数字上执行。

var number = document.querySelector("input[type=number]")

number.addEventListener('input', function() {
  var valeur = number.value
  if (valeur.startsWith("-")) {
    erreur = document.createElement("div")
    erreur.innerHTML = "No negative numbers."
    number.appendChild(erreur)
    number.parentNode.insertBefore(erreur, number.nextSibling);
  } else {
    erreur.remove()
  }
})

<input type="number" step="any" name="amount">

我应该更改什么以使消息仅显示一次？

标签： javascriptaddeventlistener

Answer 1

您应该将 div 的创建放在 if 条件之外

let erreur = document.createElement("div")
number.addEventListener('input', function() {

var number = document.querySelector("input[type=number]")
let erreur = document.createElement("div")

number.addEventListener('input', function() {
  var valeur = number.value
  if (valeur.startsWith("-")) {
    erreur.innerHTML = "No negative numbers."
    number.appendChild(erreur)
    number.parentNode.insertBefore(erreur, number.nextSibling);
  } else {
    erreur.remove()
  }
})

<input type="number" step="any" name="amount">