无法更改作为字符串传递的DOM元素样式

Question

我已经将DOM元素作为字符串传递到这里。

function showNotes() {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
let html = "";
notesObj.forEach(function(element, index) {
html += `<div class="noteCard card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Title: ${element.title}</h5>

<p class="card-text">${element.text}</p>
<a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
<a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
</div>
</div>`;
});

我想给这张卡片一个样式。当用户点击链接"时；重要的"；(如DOM中所述(，则应更改相应的卡片颜色。所以我正试图访问"；noteCard"；班这是我的markNotes((函数

function markNotes(index) {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
noteStyl = document.querySelectorAll('.noteCard')[0];
noteStyl.style.color = "red";
console.log("Color should be applied")
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
}

我也尝试过以下方法，但都没有成功。

noteStyl = document.getElementsByClassName('noteCard')[0]
noteStyl = document.querySelector('.noteCard')[0];

有了这个代码，当我点击链接"；重要的"；除了印刷"；应该应用颜色"；。因此，访问DOM文件时一定存在问题。我真的陷入了困境。提前感谢

Answer 1

请参阅下面我添加的代码和注释，我对您的localStorage代码进行了注释，并为演示添加了我的伪代码。

function showNotes() {
let notes = [{
title: 'title1',
text: 'text1'
},
{
title: 'title2',
text: 'text2'
},
{
title: 'title3',
text: 'text3'
}
];
notesObj = notes;
/* if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
} */
let html = "";
notesObj.forEach(function(element, index) {
html += `<div class="noteCard card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Title: ${element.title}</h5>

<p class="card-text">${element.text}</p>
<a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
<a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
</div>
</div>`;
});
document.getElementById("html").innerHTML = html; // to insert data into HTML
}
showNotes() // calling function first time
function markNotes(index) {
console.log('index', index)
/*let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}*/
noteStyl = document.querySelectorAll('.noteCard')[index];
noteStyl.style.color = "red";
console.log("Color should be applied")
localStorage.setItem("notes", JSON.stringify(notesObj));
//showNotes(); // See I have commented this code
}

<div id="html">
</div>

Answer 2

访问DOM没有任何问题。我认为您正在尝试访问页面上没有的元素。

您是否在showNotes功能结束时的页面上显示html？您可以通过以下方式进行操作：someDiv.innerHTML = html。

更新

要访问特定的卡(不总是第一张(，您可以为每张卡设置一个id及其索引示例：card-${index}，然后使用.getElementById访问它

更新#2

您将notesObj存储为一个数组，并在循环中(在showNotes中(创建一个静态样式。因此，您需要更新notesObj中的对象样式

因此，与其设置样式，不如创建一个样式对象：

function markNotes(index) {
let notes = localStorage.getItem("notes");
if (notes != null) {
notesObj = JSON.parse(notes);
} else {
notesObj = [];
}
if(!notesObj[index].styles) notesObj[index].styles = {};
notesObj[index].styles.color = "red";
localStorage.setItem("notes", JSON.stringify(notesObj));
showNotes();
}

然后将其应用于showNotes:

notesObj.forEach(function(element, index) {
style = "";
if(element.styles) {
console.log(element.styles);
for (let key in element.styles) {
style += `${key}: ${element.styles[key]}`;
}
}
console.log(style);
html += `<div class="noteCard card" style="width: 18rem; ${style}">
<div class="card-body">
<h5 class="card-title">Title: ${element.title}</h5>

<p class="card-text">${element.text}</p>
<a href="#" id="${index}"onclick="deleteNotes(this.id)" class="card-link" >Delete Note</a>
<a href="#" id="${index}"onclick="markNotes(this.id)"class="card-link">Important</a>
</div>
</div>`;
});