Transform js into a more dynamic format to avoid redundancy when displaying items upon click

Question

Transform js into a more dynamic format to avoid redundancy when displaying items upon click

I came across a simple lightbox code snippet, but it's based on IDs and I plan to use it for more than 20 items. I don't want to manually write out 20 JavaScript lines when there could be a more efficient way to handle it dynamically. My JS skills are not advanced enough to streamline this process.

codepen link

HTML:

<template id="one">
    <h1>Using HTML &lt;template one&gt; Tag</h1>
    <p>The template element contains HTML code without displaying it.<br>Not supported in older browsers.</p>
</template>


<button class="template" data-ref="one">template</button>


<template id="two">
    <h1>Utilizing HTML &lt;template two&gt; Tag</h1>
    <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>
</template>


<button class="template" data-ref="two">second template</button>

JS:

const templateInstance = basicLightbox.create(document.querySelector('#one'))
const templateInstanceTwo = basicLightbox.create(document.querySelector('#two'))


document.querySelector('button.template' + '[data-ref=one]').onclick = templateInstance.show
document.querySelector('button.template' + '[data-ref=two]').onclick = templateInstanceTwo.show

While this setup does function, it lacks scalability when dealing with a large number of templates.

javascript show lightbox custom-data-attribute

Answer 1

Answer №1

To streamline the code, you can implement a loop that goes through each button.template element to add individual event handlers. Within these handlers, extract the value from the data-ref attribute and utilize it to create the lightbox. Below is a functional example:

document.querySelectorAll('button.template').forEach(button => {
  button.addEventListener('click', e => {    
    basicLightbox.create(document.querySelector(e.target.dataset.ref)).show();
  });
});

html {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
}

body {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 100%;
  margin: 0;
  color: white;
  text-align: center;
}

button {
  display: inline-block;
  appearance: none;
  background: #2875ed;
  margin: .5em;
  padding: .5em 1em;
  border: none;
  color: white;
  font: inherit;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

<link rel="stylesheet" href="//s.electerious.com/basicLightbox/dist/basicLightbox.min.css" />
<script src="//s.electerious.com/basicLightbox/dist/basicLightbox.min.js"></script>
<template id="one">
  <h1>HTML &lt;template one&gt; Tag</h1>
  <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>
</template>
<button class="template" data-ref="#one">template</button>

<template id="two">
  <h1>HTML &lt;template two&gt; Tag</h1>
  <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>
</template>
<button class="template" data-ref="#two">template two</button>

Answer 2

To streamline the code, you can implement a loop that goes through each button.template element to add individual event handlers. Within these handlers, extract the value from the data-ref attribute and utilize it to create the lightbox. Below is a functional example:

document.querySelectorAll('button.template').forEach(button => {
  button.addEventListener('click', e => {    
    basicLightbox.create(document.querySelector(e.target.dataset.ref)).show();
  });
});

html {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
}

body {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  min-height: 100%;
  margin: 0;
  color: white;
  text-align: center;
}

button {
  display: inline-block;
  appearance: none;
  background: #2875ed;
  margin: .5em;
  padding: .5em 1em;
  border: none;
  color: white;
  font: inherit;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}

<link rel="stylesheet" href="//s.electerious.com/basicLightbox/dist/basicLightbox.min.css" />
<script src="//s.electerious.com/basicLightbox/dist/basicLightbox.min.js"></script>
<template id="one">
  <h1>HTML &lt;template one&gt; Tag</h1>
  <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>
</template>
<button class="template" data-ref="#one">template</button>

<template id="two">
  <h1>HTML &lt;template two&gt; Tag</h1>
  <p>The template element holds HTML code without displaying it.<br>Doesn't work in older browsers.</p>
</template>
<button class="template" data-ref="#two">template two</button>

Answer 3

Answer №2

Here is an alternative method using pure javascript, without the need for an external library:

function initialize() {
    let buttons = document.querySelectorAll("button.template");
    for (let button of buttons) {
        button.onclick = displayTemplate;
    }
}

function displayTemplate(event) {
    let main = document.querySelector("main");
    let template = document.querySelector("template").content;

    let element = template.querySelector(`div#${event.currentTarget.dataset.templateId}`);
    if (!element) return;

    template.append(...main.childNodes);
    main.appendChild(element);
}

window.onload = initialize;

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    padding: 1rem;
}

button {
    font-size: 1rem;
    color: white;
    background-color: blue;
    border: none;
    border-radius: .25rem;
    padding: .50rem;
}

<nav>
    <button class="template" data-template-id="t1">Template 1</button>
    <button class="template" data-template-id="t2">Template 2</button>
    <button class="template" data-template-id="t3">Template 3</button>
    <button class="template" data-template-id="t4">Template 4</button>
</nav>
<br>
<main>
    <h2>Choose a template</h2>
</main>

<template>
    <div id="t1">
        <h1>Template 1</h1>
        <p>The day had started brightly. The sun finally peeked through the rain after a week, and birds were chirping in its warmth. Little did anyone know what was about to unfold. It was a worst-case scenario with no escape.</p>
    </div>
    <div id="t2">
        <h1>Template 2</h1>
        <p>It had been Dana's dream for years, yet she failed to take any steps towards realizing it. There was always a valid excuse to delay or prioritize another project. As she woke up, she realized she stood at a crossroads once again. Would it be another excuse or would she finally gather the courage to chase her dream? Dana got up and took that crucial first step.</p>
    </div>
    <div id="t3">
        <h1>Template 3</h1>
        <p>Breastfeeding benefits both babies and mothers. Breastfed infants receive antibodies from their mothers against common illnesses. They are less likely to become obese as adults. Breastfeeding fosters a unique bond between mother and child. Mothers who breastfeed reduce their risk of developing breast cancer. Additionally, breastfeeding aids in quicker post-pregnancy weight loss. The advantages of breastfeeding are plentiful.</p>
    </div>
    <div id="t4">
        <h1>Template 4</h1>
        <p>A teardrop of amber clung to the branch, reaching fullness and waiting to fall. It lingered, unlike other droplets content to grow and release. This particular droplet had aspirations for legacy. It longed to be remembered long after its counterparts had faded into obscurity. And so, it awaited the perfect specimen to ensnare, hoping to be uncovered centuries later as a cherished relic.</p>
    </div>
</template>

Answer 4

Here is an alternative method using pure javascript, without the need for an external library:

function initialize() {
    let buttons = document.querySelectorAll("button.template");
    for (let button of buttons) {
        button.onclick = displayTemplate;
    }
}

function displayTemplate(event) {
    let main = document.querySelector("main");
    let template = document.querySelector("template").content;

    let element = template.querySelector(`div#${event.currentTarget.dataset.templateId}`);
    if (!element) return;

    template.append(...main.childNodes);
    main.appendChild(element);
}

window.onload = initialize;

* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    padding: 1rem;
}

button {
    font-size: 1rem;
    color: white;
    background-color: blue;
    border: none;
    border-radius: .25rem;
    padding: .50rem;
}

<nav>
    <button class="template" data-template-id="t1">Template 1</button>
    <button class="template" data-template-id="t2">Template 2</button>
    <button class="template" data-template-id="t3">Template 3</button>
    <button class="template" data-template-id="t4">Template 4</button>
</nav>
<br>
<main>
    <h2>Choose a template</h2>
</main>

<template>
    <div id="t1">
        <h1>Template 1</h1>
        <p>The day had started brightly. The sun finally peeked through the rain after a week, and birds were chirping in its warmth. Little did anyone know what was about to unfold. It was a worst-case scenario with no escape.</p>
    </div>
    <div id="t2">
        <h1>Template 2</h1>
        <p>It had been Dana's dream for years, yet she failed to take any steps towards realizing it. There was always a valid excuse to delay or prioritize another project. As she woke up, she realized she stood at a crossroads once again. Would it be another excuse or would she finally gather the courage to chase her dream? Dana got up and took that crucial first step.</p>
    </div>
    <div id="t3">
        <h1>Template 3</h1>
        <p>Breastfeeding benefits both babies and mothers. Breastfed infants receive antibodies from their mothers against common illnesses. They are less likely to become obese as adults. Breastfeeding fosters a unique bond between mother and child. Mothers who breastfeed reduce their risk of developing breast cancer. Additionally, breastfeeding aids in quicker post-pregnancy weight loss. The advantages of breastfeeding are plentiful.</p>
    </div>
    <div id="t4">
        <h1>Template 4</h1>
        <p>A teardrop of amber clung to the branch, reaching fullness and waiting to fall. It lingered, unlike other droplets content to grow and release. This particular droplet had aspirations for legacy. It longed to be remembered long after its counterparts had faded into obscurity. And so, it awaited the perfect specimen to ensnare, hoping to be uncovered centuries later as a cherished relic.</p>
    </div>
</template>

Transform js into a more dynamic format to avoid redundancy when displaying items upon click

Answer №1

Answer №2

Similar questions

Using AngularJS to send a post request with cherrypy

What is the best way to manually decrease the speed of an object's rotation using javascript?

How can the first character position be reached by moving the cursor using the jquery mask plugin?

The correct conclusion is reached by the function when the console.log statement is placed above the function call

What is the reason why Prettier does not automatically format code in Visual Studio Code?

Formatting decimals with dots in Angular using the decimal pipe

Instructions on allowing the user to enter text for searching through an array of objects, and displaying a message if a match is found. Use only pure JavaScript

Adding content into a designated position in a document

Tips for sending a form without reloading the page in node.js and ejs

Implementing character limits in VueJS fields

What is causing fs.readFileSync to not recognize my json document?

The sequence of error middleware in Express4

Tips for preventing recursion when utilizing scrollIntoView() in a scroll event handler

Error encountered while executing jest tests due to an unexpected import token

Google Bar Graphs Cannot Display Decimal Values

Unable to initiate the server generated by the express.js generator

Typescript inheritance results in an undefined value being returned

Watching a Computed Value in EmberJS

Sending a $.ajax post request transforming into a get

Using React with Axios to trigger several requests with a single action