使 select 每个元素的不同背景颜色从 javascript 中的不同颜色的功能？

Question

我有一个项目是做笔记的网站。当有人添加注释时，它会以数组的形式存储在本地存储中，并且 Javascript 函数会调用存储的元素并在元素上运行 for each 。这是 Javascript 代码：

function showNote2() {
    console.log("Show");
    let note = localStorage.getItem("notes");
    if(note == null){
        noteData = []
        // message.innerText = "Please Add a Note"
    }
    else{
        noteData = JSON.parse(note);
    };
    let showBox = "";
    noteData.forEach(function show(element, index) {
        showBox += `<div class="noteCard my-2 mx-2 card" id="card4" style="width: 18rem;">
        <select id="mySelect" class="clr-btn" style="text-align:center" onchange="change_color()">
        <option id="bckgrnd-clr" value="white">Background Color</option>
        <option id="red" value="Red">Red</option>
        <option id="green" value="Green">Green</option>
        <option id="blue" value="Blue">Blue</option>
        </select>
                <div class="card-body" id="card3">
                  <h5 class="cardtitle">Note
                  ${index + 1}
                  </h5>
                  <p class="card-text"> 
                  ${element}
                  </p>
                  <button id="${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                </div>
              </div>   `
            })
              let showNote3 = document.getElementById("notes2");
              if(noteData.length != 0){
                  showNote3.innerHTML = showBox;
              }else{
                  showNote3.innerHTML = "Please add a Note"
              }
}

在上面的代码中，select给了我们为笔记选择颜色的选项，现在我想给onchange添加一个功能，可以帮助我为不同的笔记选择不同的颜色笔记。我使用的功能仅适用于第一个音符，并根据所选的第一个音符选项设置所有音符的颜色。颜色将应用于 class 和 card-body

我在 Javascript 中构建这个用于练习。任何提示将不胜感激，因为这对我来说是新事物更新：这是我从评论中得到的想法后应用的解决方案。

function change_color(index) {
    let note = localStorage.getItem("notes");
    if(note != null ){
        let colorApply = document.getElementById("card3")
        let elm1 = document.getElementById(index)
        let color = elm1.options[elm1.selectedIndex].value;
        document.colorApply.style.backgroundColor = color;
    }
    else{
        `Note is Empty`
    }

现在这是我在 color

遇到的错误

“无法读取 null 的属性（读取 'options'）” 任何帮助将不胜感激？

Answer 1

查看工作片段。 :)

在您的循环中，像这样更改代码：

let elm1 = document.getElementById(index)

到

let showNote3 = document.getElementById(`card${index}`);
let colorApply = document.getElementById(`card${index}`)
let elm1 = document.getElementById(`mySelect${index}`)

在你的 HTML

`<div class="noteCard my-2 mx-2 card" id="card${index}" ...` />
`<select id=`mySelect${index}` class="clr-btn" style="text-align:center" onchange="change_color()">`

另外当你有这个元素时，你不需要使用document

// -> document.colorApply.style.backgroundColor = color;
colorApply.style.backgroundColor = color;

最后，您需要将笔记的索引发送到您的change_color函数中。

onchange="change_color(${index})"

function showNote2() {
  console.log("Show");
  let note = null // localStorage.getItem("notes");
  if (note == null) {
    noteData = ['My Note 1', 'My Note 2']
    // message.innerText = "Please Add a Note"
  } else {
    noteData = JSON.parse(note);
  };
  let showBox = "";
  noteData.forEach(function show(element, index) {
    showBox += `
    <div class="noteCard my-2 mx-2 card" id="card${index}" style="width: 18rem;">
            <select id="mySelect${index}" class="clr-btn" style="text-align:center" onchange="change_color(${index})">
            <option id="bckgrnd-clr" value="white">Background Color</option>
            <option id="red" value="Red">Red</option>
            <option id="green" value="Green">Green</option>
            <option id="blue" value="Blue">Blue</option>
            </select>
            <div class="card-body" id="cardbody${index}">
                      <h5 class="cardtitle">Note ${index + 1}</h5>
                      <p class="card-text"> 
                      ${element}
                      </p>
                      <button id="btn${index}" onclick="deleteNote(this.id)" class="btn btn-primary">Delete Note</a>
                    </div>
                  </div>   
                  `
  })
  let showNote3 = document.getElementById("note");
  if (noteData.length != 0) {
    showNote3.innerHTML = showBox;
  } else {
    showNote3.innerHTML = "Please add a Note"
  }
}

function change_color(index) {
  let note = noteData[index] // localStorage.getItem("notes");
  if (note != null) {
    let colorApply = document.getElementById(`card${index}`)
    let elm1 = document.getElementById(`mySelect${index}`)
    let color = elm1.options[elm1.selectedIndex].value;
    colorApply.style.backgroundColor = color;
  } else {
    console.log(`Note is Empty`)
  }
}

showNote2()

<h1>Notes</h1>
<div id='note' />
<button onclick='note' />

使 select 每个元素的不同背景颜色从 javascript 中的不同颜色的功能？

Function which enables to select different background color of each element from different color in javascript?

javascript

function

select

onchange