Javascript 如果我写smth，为什么颜色只在第一个输入区域变化

我有一个有4个输入区域的表单，但是颜色只在第一个区域发生变化，原因是什么？我如何修复它

HTML
<form>
    <input id="username" type="text" placeholder="username" value="">
    <input id="email" type="email" placeholder="email" value="">
    <input id="password" type="password" placeholder="password" value="">
    <input id="passwordRepeat" type="password" placeholder="repeat your password" value>
</form>

JS
var input = document.querySelector("input");
input.addEventListener("input", function() {

  if (input.value.length > 0)
    input.style.background = "#27ae60";
  else
    input.style.background = "none";
})

document.querySelector将只返回与选择器匹配的第一个元素

实际上，您要做的是使用querySelectorAll映射所有这些元素，并将其添加到每个元素：

document.querySelectorAll('input').forEach(function(input) {
  input.addEventListener('input', function() { 
    if (input.value.length > 0)
      input.style.background = "#27ae60";
    else
      input.style.background = "none";
    }
  });
});

编辑：好的，你们中的一些人想要一个最佳实践答案。不管怎样，给你JS。可以将可访问性属性添加到HTML，使其成为最佳做法：

//HTML
<form id="form-signup">
    <input id="username" type="text" placeholder="username" value="">
    <input id="email" type="email" placeholder="email" value="">
    <input id="password" type="password" placeholder="password" value="">
    <input id="passwordRepeat" type="password" placeholder="repeat your password" value>
</form>

//JS
const signupForm = document.getElementById('form-signup');

signupForm.addEventListener('input', event => {
  const target = event.target;

  target.value.length > 0 ? 
  target.style.background = "#27ae60" :
  target.style.background = "none";
});

document.querySelector将只返回与选择器匹配的第一个元素

实际上，您要做的是使用querySelectorAll映射所有这些元素，并将其添加到每个元素：

document.querySelectorAll('input').forEach(function(input) {
  input.addEventListener('input', function() { 
    if (input.value.length > 0)
      input.style.background = "#27ae60";
    else
      input.style.background = "none";
    }
  });
});

编辑：好的，你们中的一些人想要一个最佳实践答案。不管怎样，给你JS。可以将可访问性属性添加到HTML，使其成为最佳做法：

//HTML
<form id="form-signup">
    <input id="username" type="text" placeholder="username" value="">
    <input id="email" type="email" placeholder="email" value="">
    <input id="password" type="password" placeholder="password" value="">
    <input id="passwordRepeat" type="password" placeholder="repeat your password" value>
</form>

//JS
const signupForm = document.getElementById('form-signup');

signupForm.addEventListener('input', event => {
  const target = event.target;

  target.value.length > 0 ? 
  target.style.background = "#27ae60" :
  target.style.background = "none";
});

这是因为document.querySelector只返回与选择器匹配的第一个元素。您可以使用document.querySelectorAll，或者在本例中使用document.getElementsByTagName。无论哪种方式，您都需要遍历这些函数返回的数组

var inputs=document.getElementsByTagNameinput；//您还可以使用document.querySelectorAllinput； 函数侦听器{ 如果input.value.length>0 input.style.background=27ae60； 其他的 input.style.background=无； } 输入的输入{ input.addEventListenerinput，侦听器； } 这是因为document.querySelector只返回与选择器匹配的第一个元素。您可以使用document.querySelectorAll，或者在本例中使用document.getElementsByTagName。无论哪种方式，您都需要遍历这些函数返回的数组

var inputs=document.getElementsByTagNameinput；//您还可以使用document.querySelectorAllinput； 函数侦听器{ 如果input.value.length>0 input.style.background=27ae60； 其他的 input.style.background=无； } 输入的输入{ input.addEventListenerinput，侦听器； }

---

您需要修改JS，以便它将eventListners添加到所有输入-：

document.querySelectorAll("input").forEach(input => {
    input.addEventListener("input", function() {
        if (input.value.length > 0)
            input.style.background = "#27ae60";
        else   input.style.background = "none";
     })
})

我们还可以使用事件冒泡，这是更可取的，因为它减少了事件侦听器的数量，类似这样-： document.getElementByIdsignup.addEventListenerchange，e=>{ 如果e.target.value.length>0 e、 target.style.background=27ae60； 其他的 e、 target.style.background=无； }

---

您需要修改JS，以便它将eventListners添加到所有输入-：

document.querySelectorAll("input").forEach(input => {
    input.addEventListener("input", function() {
        if (input.value.length > 0)
            input.style.background = "#27ae60";
        else   input.style.background = "none";
     })
})

我们还可以使用事件冒泡，这是更可取的，因为它减少了事件侦听器的数量，类似这样-： document.getElementByIdsignup.addEventListenerchange，e=>{ 如果e.target.value.length>0 e、 target.style.background=27ae60； 其他的 e、 target.style.background=无； }

---

也许您可以添加一个代码示例，展示他们如何使用querySelectorAll来解决问题？也许您可以添加一个使用事件冒泡的示例，将侦听器添加到表单元素，并使用event.target来获取更改的字段？这样，您就不需要添加超过1个事件侦听器来解决这个问题，这是一个需要学习的好习惯，特别是对于更大的formsyep，最新版本的代码是完全正确的，非常感谢！删除倒数第二个}@Milton下面是你的最佳实践答案：哦，也有一种纯css的方法。包括在底部。客观地说，这是最好的方法。也许您可以添加一个代码示例，说明他们如何使用querySelectorAll来解决问题？也许您可以添加一个使用事件冒泡的示例，将侦听器添加到表单元素，并使用event.target来获取更改的字段？这样，您就不需要添加超过1个事件侦听器来解决这个问题，这是一个需要学习的好习惯，特别是对于更大的formsyep，最新版本的代码是完全正确的，非常感谢！删除倒数第二个}@Milton下面是你的最佳实践答案：哦，也有一种纯css的方法。包括在底部。客观地说，这是最好的方法。最好使用forEach而不是map。为什么要创建一个全新的数组呢？也许您可以添加一个使用事件冒泡的示例，将侦听器添加到表单元素中，并使用event.target获取更改的字段？这样，您就不用添加超过1个事件侦听器来解决此问题。非常感谢！这真是太棒了，我非常高兴看到这样一个友好的社区。最好用forEach而不是地图。为什么要创建一个全新的数组呢？也许您可以添加一个使用事件冒泡的示例，将侦听器添加到表单元素中，并使用event.target获取更改的字段？这样，您就不用添加超过1个事件侦听器来解决此问题。非常感谢！真是太好了，我非常高兴看到这样一个友好的社区。非常感谢！太棒了，我很高兴

---

我很高兴看到这样一个友好的团体。非常感谢！真是太棒了，我非常高兴看到这样一个善良的社区