如何通过JavaScript实现点击单个卡片仅修改该卡片颜色

你的代码中impNotes函数会遍历所有带funny类的卡片并统一修改背景色，且按钮点击事件未传递对应卡片的唯一标识，导致点击任意按钮都会触发全卡片变色。以下是修复方案：

修复步骤 #

1. 移除页面加载时的无效调用
   原代码开头的impNotes()会导致页面加载时所有卡片直接变黄，直接删除这一行。

2. 修改按钮点击事件参数
   在shownNotes函数生成卡片HTML时，将"Mark Important"按钮的onclick改为传递当前按钮元素（this），同时可以移除无意义的固定id：

// 原按钮代码
<button id="impbtn" onclick="impNotes(this.id)" class=" my-2 btn btn-primary">Mark Important</button>
// 修改后
<button onclick="impNotes(this)" class=" my-2 btn btn-primary">Mark Important</button>

3. 重写impNotes函数逻辑
   通过传入的按钮元素，找到其所在的目标卡片，仅修改该卡片的背景色：

function impNotes(button) {
    // 用closest方法直接找到最近的.funny类卡片
    const targetCard = button.closest('.funny');
    targetCard.style.backgroundColor = "yellow";
}

如果需要兼容不支持closest的浏览器，可改用父元素遍历：

function impNotes(button) {
    // 按钮 -> card-body -> 目标卡片
    const targetCard = button.parentElement.parentElement;
    targetCard.style.backgroundColor = "yellow";
}

完整修改后的JavaScript代码 #

console.log("welcome to our website");
shownNotes();
// 移除了impNotes()的初始调用
let addbtn = document.getElementById("addbtn");
addbtn.addEventListener("click", handler)
function handler() {
    let txtarea = document.getElementById("txtarea");
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesObj = [];
    }
    else {
        notesObj = JSON.parse(notes);
    }
    notesObj.push(txtarea.value);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    txtarea.value = "";
    console.log(notesObj);
    shownNotes();
}

function shownNotes() {
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesObj = [];
    }
    else
        notesObj = JSON.parse(notes);
    let html = "";
    notesObj.forEach(function (element, index) {
        html +=
            `<div class="card mx-2 my-2 funny" style="width: 18rem;" >
           <div class="card-body">
         <h5 class="card-title">${index}</h5>
         <p class="card-text">${element}</p>
         <button id="${index}" onclick="delNotes(this.id)" class="btn btn-primary">Delete Note</button>
         <button onclick="impNotes(this)" class=" my-2 btn btn-primary">Mark Important</button>
           </div>
        </div>`
    });
    let notesElm = document.getElementById("notes");
    if (notesObj.length != 0) {
        notesElm.innerHTML = html;
    }
    else {
        notesElm.innerHTML = "<b>Nothing to show</b>"
    }
}

function delNotes(index) {
    console.log("i m deleting", index)
    let notes = localStorage.getItem("notes");
    if (notes == null) {
        notesObj = [];
    }
    else
        notesObj = JSON.parse(notes);

    notesObj.splice(index, 1);
    localStorage.setItem("notes", JSON.stringify(notesObj));
    shownNotes();
}

function impNotes(button) {
    console.log("important function is firing ");
    const targetCard = button.closest('.funny');
    targetCard.style.backgroundColor = "yellow";
}

额外优化：支持标记/取消标记切换 #

如果需要实现点击按钮切换卡片重要状态（黄色/默认背景），可修改impNotes函数：

function impNotes(button) {
    const targetCard = button.closest('.funny');
    // 切换背景色：当前为黄色则恢复默认，否则设为黄色
    targetCard.style.backgroundColor = targetCard.style.backgroundColor === "yellow" ? "" : "yellow";
}

内容的提问来源于stack exchange，提问作者Muhammad Aafaq