文章/答案/技术大牛

发布

社区首页 >问答首页 >如何更改保存在数组中的dom-元素的背景色

问如何更改保存在数组中的dom-元素的背景色
EN

Stack Overflow用户

提问于 2022-10-04 02:12:49

回答 3查看 86关注 0票数 1

我想更改输入字段的颜色，其中包含值或不分别为空。首先，所有DOM元素都存储在一个对象中。在这方面，我使用.filter方法创建了一个新数组，该方法从我用Object.values方法创建的数组中过滤所有填充的输入字段。最后，我遍历数组filledFields，目的是操纵每个DOM元素的样式设置，这是filledFields的内容，但会出现以下错误消息：Uncaught TypeError: Cannot set properties of undefined (setting 'backgroundColor')。为什么会发生这种事？

window.onload = () => {
  const input = {
    caseNumber: {
      month: document.getElementById("number-sequence"),
      year: document.getElementById("year"),
    },
    clientsInformation: {
      gender: document.getElementById("gender"),
      inpName: document.getElementById("name"),
    },
    case: {
      case: document.getElementById("case"),
    },
    adress: {
      street: document.getElementById("street"),
      houseNumber: document.getElementById("house-number"),
      postCode: document.getElementById("post-code"),
      city: document.getElementById("city"),
      receiver: document.getElementById("receiver"),
    },
  };

  addEventListener("input", () => {
    let filledFields = Object.values(input).filter((item) => item.value != "");
    for (vals of filledFields) {
      console.log(vals);
      vals.style.backgroundColor = "e7f0fe";
    }
  });
};

.flexbox-container {
  display: flex;
 
  gap: 30px;
  flex-direction: column;
   
}

.items {
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-height: 20px;
  flex-wrap: wrap;
}

input,
select {
  width: 50px;
  text-align: center;
  font-size: 19px;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid;
}

label {
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-right: 30px;
}

<body>
  <div class="flexbox-container">

    <div class="flexbox-item1 items">
      <label>Aktenzeichen</label>
      <input id="number-sequence">
      <input id="year">
    </div>

    <div class="flexbox-item2 items">
      <label>Anliegen</label>
      <input id="case">
    </div>

    <div class="flexbox-item3 items ">
      <label>Name</label>
      <select id="gender">
        <option>Herr</option>
        <option>Frau</option>
      </select>
      <input id="name">
    </div>

    <div class="flexbox-item4 items ">
      <label id="adress-label">Adresse</label>
      <input id="street">
      <input id="house-number">
      <input id="post-code">
      <input id="city">
      <input id="receiver">
    </div>


  </div>
</body>

javascript

html

arrays

dom-manipulation

回答 3

Stack Overflow用户

发布于 2022-10-04 02:47:55

filter方法没有针对存储在对象中的实际输入DOM元素。如果在过滤器中console.log item，就会看到是嵌套在input对象中的对象。在for循环中也是如此，因为backgroundColor在style中不可用，而vals中没有定义，因为vals不是DOM元素。

对于您要实现的这个算法，有一种更简单的方法。不需要将所选元素全部存储在对象中。您只需要存储它们的ID，循环遍历它们，检查值，并相应地对它们做任何您想做的事情。但是，如果您坚持将元素存储在一个对象中，您可以继续这样做，但是您只需要编写另一个循环来迭代该嵌套对象的每个值。以下是如何：

window.onload = () => {
  const inputs = { // changed the variable name here
    caseNumber: {
      month: document.getElementById("number-sequence"),
      year: document.getElementById("year"),
    },
    clientsInformation: {
      gender: document.getElementById("gender"),
      inpName: document.getElementById("name"),
    },
    case: {
      case: document.getElementById("case"),
    },
    adress: {
      street: document.getElementById("street"),
      houseNumber: document.getElementById("house-number"),
      postCode: document.getElementById("post-code"),
      city: document.getElementById("city"),
      receiver: document.getElementById("receiver"),
    },
  };

  addEventListener("input", () => {
  
    for(group in inputs){
      for(item in inputs[group]){
        let input = inputs[group][item];
        if(input.value != ''){
          input.style.backgroundColor = '#ee0077'
        }
      }
    }
    
  });
};

.flexbox-container {
  display: flex;
 
  gap: 30px;
  flex-direction: column;
  margin-left: 8rem;
}

.items {
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-height: 80px;
  flex-wrap: wrap;
}

input,
select {
  width: 200px;
  text-align: center;
  font-size: 19px;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid;
}

label {
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-right: 30px;
}

<body>
  <div class="flexbox-container">

    <div class="flexbox-item1 items">
      <label>Aktenzeichen</label>
      <input id="number-sequence">
      <input id="year">
    </div>

    <div class="flexbox-item2 items">
      <label>Anliegen</label>
      <input id="case">
    </div>

    <div class="flexbox-item3 items ">
      <label>Name</label>
      <select id="gender">
        <option>Herr</option>
        <option>Frau</option>
      </select>
      <input id="name">
    </div>

    <div class="flexbox-item4 items ">
      <label id="adress-label">Adresse</label>
      <input id="street">
      <input id="house-number">
      <input id="post-code">
      <input id="city">
      <input id="receiver">
    </div>


  </div>
</body>

票数 0

Stack Overflow用户

发布于 2022-10-04 02:51:27

你们之间有两个物体。例如，input包含一些对象，如caseNumber、clientsInformation等；caseNumber包含用于month和year的另一个对象。如果您想循环遍历所有子对象，则需要使用flatMap将它们平铺如下

Object.values(input).flatMap(Object.values).filter((item) => item.value !== "");

另外请注意，在背景色e7f0fe__中，您也错过了e7f0fe，因此它不会正确应用。对于修复，您需要将其设置为#e7f0fe

window.onload = () => {
  const input = {
    caseNumber: {
      month: document.getElementById("number-sequence"),
      year: document.getElementById("year"),
    },
    clientsInformation: {
      gender: document.getElementById("gender"),
      inpName: document.getElementById("name"),
    },
    case: {
      case: document.getElementById("case"),
    },
    adress: {
      street: document.getElementById("street"),
      houseNumber: document.getElementById("house-number"),
      postCode: document.getElementById("post-code"),
      city: document.getElementById("city"),
      receiver: document.getElementById("receiver"),
    },
  };

  addEventListener("input", () => {
    let filledFields = Object.values(input).flatMap(Object.values).filter((item) => item.value !== "");
    
    for (vals of filledFields) {
      vals.style.backgroundColor = "#e7f0fe";
    }
  });
};

.flexbox-container {
  display: flex;
 
  gap: 30px;
  flex-direction: column;
   
}

.items {
  display: flex;
  flex-direction: row;
  gap: 5px;
  min-height: 20px;
  flex-wrap: wrap;
}

input,
select {
  width: 50px;
  text-align: center;
  font-size: 19px;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid;
}

label {
  width: 100px;
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-right: 30px;
}

<body>
  <div class="flexbox-container">

    <div class="flexbox-item1 items">
      <label>Aktenzeichen</label>
      <input id="number-sequence">
      <input id="year">
    </div>

    <div class="flexbox-item2 items">
      <label>Anliegen</label>
      <input id="case">
    </div>

    <div class="flexbox-item3 items ">
      <label>Name</label>
      <select id="gender">
        <option>Herr</option>
        <option>Frau</option>
      </select>
      <input id="name">
    </div>

    <div class="flexbox-item4 items ">
      <label id="adress-label">Adresse</label>
      <input id="street">
      <input id="house-number">
      <input id="post-code">
      <input id="city">
      <input id="receiver">
    </div>


  </div>
</body>

票数 0

Stack Overflow用户

发布于 2022-10-04 03:49:10

问题

颜色需要以#作为前缀。

vals.style.backgroundColor = "#e7f0fe";

如果您真的想在OP中使用当前对象，那么需要进一步深入了解下一个对象：

let filledFields = Object.values(input).map(obj => 
  Object.values(obj).filter((item) => 
    item.value != ""));

我没有测试它，因为你所做的是不必要的。有处理DOM的API，即HTMLFormElement接口，如果您将所有内容包装在<form>中。

addEventListener()需要绑定到<form>或窗体控件(如<input>或<select> )。

<form id="main">
  <input name="data">
  ...

// #id or [name] of <form> or form control can be used

const main = document.forms.main;
main.addEventListener("input", function(event) {...

// OR

const fc = main.elements;
const input = fc.data;
input.addEventListener("input", function(event) {...

由于有几个窗体控件受到事件侦听器的影响，所以最好的方法是将"input“事件绑定到<form>，并在"input”事件上触发时只处理<input>和<select>。为了使引用多个窗体控件更简单，在所有这些控件中都添加了[name="data"]。详细信息请参见事件和事件委托。

详细信息在示例中有注释

// Reference <form>
const main = document.forms.main;

// Bind the <form> to the "input" event
main.addEventListener("input", function(event) {
  /* event.target is the element the user is currently typing into
  If event.target isn't <form> AND if it's [name="data"]...
    If event.target value is ""...
      Change its background to white...
    Otherwise...
      Change its background to grey
  */
  if (event.target !== this && event.target.name === "data") {
    if (event.target.value === "") {
      event.target.style.background = "#fff";
    } else {
      event.target.style.background = "#e7f0fe";
    }
  }
});

html {
  font: 300 2ch/1.2 "Segoe UI"
}

.flexbox-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: max-content;
  margin: 20px auto;
  padding: 30px 15px;
  border-radius: 5px;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 50px;
  border-radius: 5px;
}

legend {
  font-weight: 500;
  font-size: 1.3rem;
}

input,
select {
  width: 200px;
  border: 1px solid;
  border-radius: 5px;
  font: inherit;
  font-size: 1.15rem;
}

select {
  width: 205px;
}

label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 1.2rem;
}

<form id="main">
  <fieldset class="flexbox-container">
    <fieldset class="items">
      <legend>Aktenzeichen</legend>
      <label>Sequence: <input id="sequence" name="data"></label>
      <label>Year: <input id="year" name="data"></label>
    </fieldset>

    <fieldset class="items">
      <legend>Anliegen</legend>
      <label>Case: <input id="case" name="data"></label>
    </fieldset>

    <fieldset class="items">
      <legend>Persönliche Daten</legend>
      <label>Name: <input id="name" name="data"></label>
      <label>Gender: <select id="gender" name="data">
        <option selected disabled>Pick a Gender</option>
        <option>Herr</option>
        <option>Frau</option>
      </select>  
      </label>
    </fieldset>

    <fieldset class="items">
      <legend>Adresse</legend>
      <label>Reciever: <input id="receiver" name="data"></label>
      <label>Street: <input id="street" name="data"></label>
      <label>House Number:&nbsp; <input id="houseNumber" name="data"></label>
      <label>Post Code: <input id="postCode" name="data"></label>
      <label>City: <input id="city" name="data"></label>
    </fieldset>
  </fieldset>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73942513

复制

相似问题

问如何更改保存在数组中的dom-元素的背景色
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改保存在数组中的dom-元素的背景色EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何更改保存在数组中的dom-元素的背景色
EN