如何使用 JavaScript 从此 html 中获取输入元素的值并更改输入元素的背景答案

【问题标题】：How to get value from input element from this html using JavaScript and also changing the background of the input element如何使用 JavaScript 从此 html 中获取输入元素的值并更改输入元素的背景
【发布时间】：2019-04-04 15:20:01
【问题描述】：

如果数字大于前面的数字，我需要 javascript 将输入元素的背景更改为红色，如果小于前面的数字，则为红色

html中输入元素的值应该在数组中，然后javascript应该分析数组，如果数字大于前面的数字则使输入元素背景为绿色，如果小于前面的数字则为红色

HTML

 <form>
   <input type="number" class="display" value="" id= "seat-1">
   <input type="number" class="display" value="" id= "seat-2">
   <input type="number" class="display" value="" id= "seat-3">
   <input type="number" class="display" value="" id= "seat-4">  
   <input type="number" class="display" value="" id= "seat-5">
   <input type="number" class="display" value="" id= "seat-6">
 </form>

获取值的Javascript

 let seat1 = document.getElementById("seat-1").value;
 let seat2 = document.getElementById("seat-2").value;
 let seat3 = document.getElementById("seat-3").value;
 let seat4 = document.getElementById("seat-4").value;
 let seat5 = document.getElementById("seat-5").value;
 let seat6 = document.getElementById("seat-6").value;

Javascript 使其成为一个数组并在输入背景上打印红色或绿色

 let seatRow1 = [ seat1,  seat2, seat3, seat4, seat5, seat6];

    for (let i = 0; i <  seatRow1.length;   i++) {

      if ( (seatRow1[i + 1]) > seatRow1[i]) {
       document.getElementByClassName("display").style.backgroundColor = 
          "green";
            }
      else { 
       document.getElementByClassName("display").style.backgroundColor = 
     "red";
     }
     }

谢谢

【问题讨论】：

必须是vanilla js吗？
（jQuery 会让监听表单的变化变得更简单）
不，它不在 Vanilla Js 中，它必须在核心 javascript 中
另外一个附注，你的方法中有一个错字getElementsByClassName()（元素是复数）developer.mozilla.org/en-US/docs/Web/API/Document/…（它返回一个HTMLCollection（多个元素），所以你需要改变你的设置方式它们的属性也是如此。

标签： javascript html arrays

【解决方案1】：

您不需要在页面加载时获取元素值，而是需要在其中一个值发生变化时检查这些值（因为页面加载时的值可能会随着用户输入信息而变化）。一种方法是监听input 事件，然后检查更改输入的值并将其与其兄弟姐妹进行比较。例如：

const changeBackground = (elem, v1, v2) => {
  if (v1 < v2) {
    elem.style.backgroundColor = 'red';
  } else if (v1 > v2) {
    elem.style.backgroundColor = 'green';
  } else {
    elem.style.backgroundColor = 'transparent';
  }
};

const inputs = document.querySelectorAll('input');
for (let input of inputs) {
  input.addEventListener('input', (event) => {
    const target = event.currentTarget;
    const value = parseFloat(target.value);
    const prev = target.previousElementSibling;
    const next = target.nextElementSibling;
    if (prev) {
      changeBackground(target, value, parseFloat(prev.value));
    }
    
    if (next) {
      changeBackground(next, parseFloat(next.value), value);
    }
  });
}

<form>
  <input type="number" value="">
  <input type="number" value="">
  <input type="number" value="">
  <input type="number" value="">
  <input type="number" value="">
  <input type="number" value="">
</form>

【讨论】：