Struggling to retrieve data from the DOM that was passed as a string. Looking for guidance on using an external function that I have included in the code

Question

Struggling to retrieve data from the DOM that was passed as a string. Looking for guidance on using an external function that I have included in the code

Need help with updating the appearance of a card when clicking on the "Important" link? The goal is to change the background color of the corresponding card and save the changes in local storage. However, encountering issues when accessing the DOM file passed as a string. For example, unable to access

document.getElementsByClassName("noteCard")

within the function markNotes(index). Despite this,

console.log("Color is not applied")

runs successfully. When attempting to change the body background color using

document.body.style.backgroundColor = "lightblue";

, it works as expected. The main challenge lies in changing the background color of the cards with the class "noteCard" specifically. Any insights or solutions would be greatly appreciated.

Below you'll find the HTML code:

...

And here's the JavaScript code:

...

javascript json bootstrap-4 styles web-frontend

Answer 1

Answer №1

An important detail you overlooked was the use of index when fetching an element within the function markNotes:

function markNotes(index) {
   let notes = localStorage.getItem("notes");
   if (notes != null) {
    notesObj = JSON.parse(notes);
   } else {
    notesObj = [];
   }
  let noteCard = document.getElementsByClassName("noteCard")[index];
    noteCard.style.color = "lightblue";
    console.log("Color is applied")
   localStorage.setItem("notes", JSON.stringify(notesObj));
   //showNotes(); you don't need to add this again
}

For a fully functional code example, check out this fiddle: link

Answer 2

An important detail you overlooked was the use of index when fetching an element within the function markNotes:

function markNotes(index) {
   let notes = localStorage.getItem("notes");
   if (notes != null) {
    notesObj = JSON.parse(notes);
   } else {
    notesObj = [];
   }
  let noteCard = document.getElementsByClassName("noteCard")[index];
    noteCard.style.color = "lightblue";
    console.log("Color is applied")
   localStorage.setItem("notes", JSON.stringify(notesObj));
   //showNotes(); you don't need to add this again
}

For a fully functional code example, check out this fiddle: link

Struggling to retrieve data from the DOM that was passed as a string. Looking for guidance on using an external function that I have included in the code

Answer №1

Similar questions

Creating an array using the variables in a class

Compiling Vue components upon insertion into the DOM

Provide MongoDB ID for SQL Server across several entries

Is there a way to create a navigation menu that highlights as we scroll down the page?

Accessing data from an API using Node.js

Real-time Calculation and Validation of Input Field Totals Using JQuery with Modulus % Rules

Issues with handling JSON data using SwiftyJSON

Determining if a user is already logged in from a different device using express-session

Deciphering cURL data within a Ruby on Rails application

How to Validate a JSON Key's Value in PHP

How can I create a selenium web driver test on Ubuntu 20.04?

Error handling in Spring MVC's @ResponseBody annotation

Show a popover within a parent div that has limited visible space due to its hidden overflow

Using PHP variables in JavaScript to access getElementById

Sorting price and date with Vue in Laravel - A beginner's guide

Using Multiline Strings for Arguments

Encountering difficulties retrieving JSON response from Express in a production environment

React Router will not remount the component when using this.context.router.push

Adjust the Scope in Angular-Charts.js Post-Rendering

Modifying npm packages within a web application