How to place EJS element into onclick=“”, in a html line

So I am creating a simple project gallery, and to do so I followed a W3schools tutorial on making a photo gallery and converting this to my needs. However with that tutorial the number of items is predefined, for mine, it is connected to MongoDB using Nodejs and stuff. The original tutorial follows this html scheme:

<div class="section-projects-main-container">

            <!-- Full-width images with number text -->
            <div class="section-projects-project-container">
                <div class="section-projects-project-title">Great Tree 1</div>
                <div class="section-projects-project-date">21<span id="slashs">/</span>69<span id="slashs">/</span>4200</div>
                <img class="section-projects-project-img" src="tree.jfif">
                <div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>
                <button class="section-projects-project-btn">Learn More</button>
            </div>
        
            <div class="section-projects-project-container">
                <div class="section-projects-project-title">Great Tree 2</div>
                <div class="section-projects-project-date">21/21/21</div>
                <img class="section-projects-project-img" src="tree2.jfif">
                <div class="section-projects-project-description">This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool. This is a sample description, it will explain the project and basic about what this is going to be, and why it is so cool.</div>

            </div>
        
        
            <!-- Next and previous buttons -->
            <a class="section-projects-btn-prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="section-projects-btn-next" onclick="plusSlides(1)">&#10095;</a>
        

            <!-- Thumbnail images -->
            <div class="section-projects-thumbnail-mtitle">Other Projects</div>
            
            <div class="section-projects-thumbnail-row">
                <div class="section-projects-thumbnail-col" >
                    <img class="section-projects-thumbnail-img cursor" src="tree.jfif" onclick="currentSlide(1)"  alt="The Woods">
                    <h3 class="section-projects-thumbnail-title">Project Title 1</h3>
                    <h4 class="section-projects-thumbnail-date">21/69/4300</h4>
                </div>
                <div class="section-projects-thumbnail-col">
                    <img class="section-projects-thumbnail-img cursor" src="tree2.jfif"  onclick="currentSlide(8)" alt="Cinque Terre">
                    <h3 class="section-projects-thumbnail-title">Project Title 2</h3>
                    <h4 class="section-projects-thumbnail-date">21/69/4200</h4>
                </div>
            </div>
        </div>

And the JS used was :

var slideIndex = 1;
            showSlides(slideIndex);

            // Next/previous controls
            function plusSlides(n) {
                showSlides(slideIndex += n);
            }

            // Thumbnail image controls
            function currentSlide(n = id) {
                showSlides(slideIndex = id);
            }

            function showSlides(n) {
                var i;
                var slides = document.getElementsByClassName("section-projects-project-container");
                var column = document.getElementsByClassName("section-projects-thumbnail-col");
                var dots = document.getElementsByClassName("section-projects-thumbnail-img");

                if (n > slides.length) {slideIndex = 1}
                if (n < 1) {slideIndex = slides.length}
                for (i = 0; i < slides.length; i++) {
                    slides[i].style.display = "none";
                }
                for (i = 0; i < dots.length; i++) {
                    column[i].className = column[i].className.replace(" active", "");
                    column[i].style.display = "inline-block";
                }

                slides[slideIndex-1].style.display = "inline-flex";
                column[slideIndex-1].className += " active";
                column[slideIndex-1].style.display = "none";
            }

So the onclick was passed into <img> of each thumbnail image, and the specific order of the thumbnail was listed into it’s parameter as such currentSlide(n).

Now with EJS, the html is as such :

<div class="section-projects-main-container">
                <% projectdetails.forEach(project => { %>
                    <!-- Full-width images with number text -->
                    <div class="section-projects-project-container">
                        <div class="section-projects-project-title"><%= project.projectName %></div>
                        <div class="section-projects-project-date"><%= project.projectDate %></div>
                        <img class="section-projects-project-img" src="data:<%=project.img.contentType%>;base64,<%=project.img.data.toString('base64')%>">
                        <div class="section-projects-project-description"><%= project.projectDescription %></div>
                        <button class="section-projects-project-btn">Learn More</button>
                    </div>
                <% }) %>   
            
            <!-- Next and previous buttons -->

            <a class="section-projects-btn-prev" onclick="plusSlides(-1)">&#10094;</a>
            <a class="section-projects-btn-next" onclick="plusSlides(1)">&#10095;</a>
        

            <!--Thumbnail images--> 
            <div class="section-projects-thumbnail-mtitle">Other Projects</div>
            
            <div class="section-projects-thumbnail-row">
                <% projectdetails.forEach(item => { %>
                    <div class="section-projects-thumbnail-col" >
                        <img class="section-projects-thumbnail-img cursor" src="data:<%=item.img.contentType%>;base64,<%=item.img.data.toString('base64')%>" onclick="currentSlide()"  alt="The Woods">
                        <h3 class="section-projects-thumbnail-title"><%= item.projectName %></h3>
                        <h4 class="section-projects-thumbnail-date"><%= item.projectDate %></h4>
                    </div>
                <% }) %> 
            </div> 
        </div>

But I am not sure how to pass the _id of each project into the thumbnail onclick function. I have tried sending the _id into the html <div id="hiddendiv" style="color: white; display: none; position: relative;"><%=project.id %></div> and then retrieving this value via JS and running the function as such. But this does not work properly.

Is there any solution to this? and if not what is the next possible way to make the currentSlide() function without a variable being needed?. THank you

Answer

I would probably skip using a hidden div as some sort of data keeper. Use data-id attribute instead: data-id="<%=project.id %>"

Or on the other hand, why not just do onclick="currentSlide(<%= project.id %>)"?

I would gladly like to help you more, but I don’t know what’s the point of the JavaScript above and what it should do.

Also, I would probably add an event click listener to every <div class="section-projects-project-container"> and then in the JavaScript got the data-id using: getAttribute('data-id'). You can get the element that called the function using this so you could probably then do:

this.getAttribute('data-id')

Edit:

Well, if it’s really that similar to that W3 example – why not just do this?

<% for (var i = 0; i < projectdetails.length; i++) { %>
<div class="section-projects-thumbnail-col">
  <img
    class="section-projects-thumbnail-img cursor"
    src="data:<%= projectdetails[i].img.contentType %>;base64,<%= projectdetails[i].img.data.toString('base64') %>"
    onclick="currentSlide(<%= i %>)"
    alt="Alternate text"
  />
  <h3 class="section-projects-thumbnail-title"><%= projectdetails[i].projectName %></h3>
  <h4 class="section-projects-thumbnail-date"><%= projectdetails[i].projectDate %></h4>
</div>
<% } %>

Hopefully it works, but the principle is clear

Leave a Reply

Your email address will not be published. Required fields are marked *