"Retrieve the target element using the ID selector when it matches the specified value in

Question

"Retrieve the target element using the ID selector when it matches the specified value in

I am struggling to target and display an HTML id tag only when a corresponding JS object in an array has a "live" value of true. How can I achieve this?

My goal is to have a JavaScript loop that displays a link in the schedule module if the link id matches the "scheduleId" of an object, and the "live" value of that object is true. Can you help me with targeting and displaying this link?

Check out my HTML below:



<div class="test-schedule">
   <h2>Schedule</h2>
   <div><span>School of Ed</span><a class="link-class" id="ed">School of Ed link</a></div>
   <div><span>School of Humanities</span><a class="link-class" id="hss">School of Humanities link</a></div>
   <div><span>School of Science</span><a class="link-class" id="sci">School of Science link</a></div>
   <div><span>School of Nursing</span><a class="link-class" id="nursing">School of Nursing link</a></div>
</div>


<style>
.link-class{display:none}
</style>

Here is the JavaScript part:

const eventList = [

  {
    scheduleId: 'ed',
    live: 'true',
  },
  {
    scheduleId: 'hss',
    live: 'false',
  },
  {
    scheduleId: 'sci',
    live: 'false',
  },
  {
    scheduleId: 'nursing',
    live: 'false',
  },
];

Link to Codepen: https://codepen.io/lvl12sealclubber/pen/PoWbJZQ?editors=1011

javascript arrays json sorting object

Answer 1

Answer №1

Are you looking to hide all links and only show some based on a certain JS value? Would this solution work for you:

.link-class {
    display: none;
}

for (let item of itemList) {
    if (item.active) {
        document.getElementById(item.id).style.display = "block";
    }
}

Answer 2

Are you looking to hide all links and only show some based on a certain JS value? Would this solution work for you:

.link-class {
    display: none;
}

for (let item of itemList) {
    if (item.active) {
        document.getElementById(item.id).style.display = "block";
    }
}

Answer 3

Answer №2

If you're looking to display the link of an event based on whether the event is live or not in the events object, you can achieve this by creating a simple class that will show the element when necessary.

const eventList = [
  {
    scheduleId: "ed",
    live: "true",
  },
  {
    scheduleId: "hss",
    live: "false",
  },
  {
    scheduleId: "sci",
    live: "true",
  },
  {
    scheduleId: "nursing",
    live: "false",
  },
];

const checkLinks = () => {
  for (let event of eventList) {
    if (event.live === "true") {
      document.querySelector("#" + event.scheduleId).classList.add("show-link");
      console.log(event.scheduleId);
    }
  }
};

checkLinks();

.link-class {
  display: none;
}

.show-link {
  display: inline-block;
  color: blue;
}

    <div class="test-schedule">
      <h2>Schedule</h2>
      <div>
        <span>School of Ed </span
        ><a class="link-class" id="ed">School of Ed link</a>
      </div>
      <div>
        <span>School of Humanities </span
        ><a class="link-class" id="hss">School of Humanities link</a>
      </div>
      <div>
        <span>School of Science </span
        ><a class="link-class" id="sci">School of Science link</a>
      </div>
      <div>
        <span>School of Nursing </span
        ><a class="link-class" id="nursing">School of Nursing link</a>
      </div>
    </div>

Answer 4

If you're looking to display the link of an event based on whether the event is live or not in the events object, you can achieve this by creating a simple class that will show the element when necessary.

const eventList = [
  {
    scheduleId: "ed",
    live: "true",
  },
  {
    scheduleId: "hss",
    live: "false",
  },
  {
    scheduleId: "sci",
    live: "true",
  },
  {
    scheduleId: "nursing",
    live: "false",
  },
];

const checkLinks = () => {
  for (let event of eventList) {
    if (event.live === "true") {
      document.querySelector("#" + event.scheduleId).classList.add("show-link");
      console.log(event.scheduleId);
    }
  }
};

checkLinks();

.link-class {
  display: none;
}

.show-link {
  display: inline-block;
  color: blue;
}

    <div class="test-schedule">
      <h2>Schedule</h2>
      <div>
        <span>School of Ed </span
        ><a class="link-class" id="ed">School of Ed link</a>
      </div>
      <div>
        <span>School of Humanities </span
        ><a class="link-class" id="hss">School of Humanities link</a>
      </div>
      <div>
        <span>School of Science </span
        ><a class="link-class" id="sci">School of Science link</a>
      </div>
      <div>
        <span>School of Nursing </span
        ><a class="link-class" id="nursing">School of Nursing link</a>
      </div>
    </div>

Answer 5

Answer №3

An improvement could be made by changing the data type of the 'live' property from a string to a boolean.

In a practical scenario, this process would be driven by data, eliminating the need for date comparisons and simply checking if the 'live' property is true or false.

If my understanding is correct, when a user visits this page, the current date/time is calculated to display which event is live. In this case, comparing the current date/time and displaying a link for the live event should suffice. There is no necessity to update the event.live property using JavaScript; in fact, it is advisable not to alter your data in this manner.

Furthermore, rather than dynamically updating the banner style through JavaScript, consider maintaining a placeholder at the top and managing styles via CSS. I fail to see any significant benefit in handling styling with JavaScript.

Answer 6

An improvement could be made by changing the data type of the 'live' property from a string to a boolean.

In a practical scenario, this process would be driven by data, eliminating the need for date comparisons and simply checking if the 'live' property is true or false.

If my understanding is correct, when a user visits this page, the current date/time is calculated to display which event is live. In this case, comparing the current date/time and displaying a link for the live event should suffice. There is no necessity to update the event.live property using JavaScript; in fact, it is advisable not to alter your data in this manner.

Furthermore, rather than dynamically updating the banner style through JavaScript, consider maintaining a placeholder at the top and managing styles via CSS. I fail to see any significant benefit in handling styling with JavaScript.

Answer 7

Answer №4

To display a filtered list of live events, you can use the following method:

const eventList = [{
  scheduleId: 'ed',
  live: 'true',
}, {
  scheduleId: 'hss',
  live: 'false',
}, {
  scheduleId: 'sci',
  live: 'false',
}, {
  scheduleId: 'nursing',
  live: 'true',
}];

const scheduleEl = document.querySelector("#schedule")
eventList
  .filter(event => event.live === 'true')
  .forEach(event => {
    scheduleEl.innerHTML += `<p>- ${event.scheduleId}</p>`;
  });

<p>Live Event Schedule:</p>
<div id="schedule">
</div>

Answer 8

To display a filtered list of live events, you can use the following method:

const eventList = [{
  scheduleId: 'ed',
  live: 'true',
}, {
  scheduleId: 'hss',
  live: 'false',
}, {
  scheduleId: 'sci',
  live: 'false',
}, {
  scheduleId: 'nursing',
  live: 'true',
}];

const scheduleEl = document.querySelector("#schedule")
eventList
  .filter(event => event.live === 'true')
  .forEach(event => {
    scheduleEl.innerHTML += `<p>- ${event.scheduleId}</p>`;
  });

<p>Live Event Schedule:</p>
<div id="schedule">
</div>

"Retrieve the target element using the ID selector when it matches the specified value in

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Concerns raised about submitting a request through ajax

Generate a fresh row in a table with user inputs and save the input values when the "save" button is

Trying to organize JSON data by multiple parameters using jQuery

Utilize the latest REDUX state within a React component's function

Preserve selected option in select box after page refresh in JSP

Create a new webpage following the slug

Steps for launching Angular 5 application using Node.js server

How can one transfer information from a client to a server and complete a form using JavaScript?

Why is the text returned by the Angular Response body missing the JSON brackets? Strange, isn't it

Each time I attempt to update my profile on the web application, I receive this notification

What is the best way to utilize Link for navigation in React with Material UI?

Unpacking JSON data and mapping JPA entities

creating a number + i formatted array in R

What is the best way to iterate through an array of dynamic form inputs and distribute them into multiple tables?

In three.js, it is important to understand that Vertex and Vector3 are not simply

Display a multiline bash variable in order to send a JSON payload with curl

What is the correct way to format JSON files for writing?

Unable to switch checkbox state is not working in Material UI React

Add HTML to a div element using jQuery when content is replicated through JavaScript

When attempting to retrieve JSON data from MySQL in Python, an error is encountered stating: "TypeError: the JSON object must be a string