build onclick inside a loop Javascript/jquery

Question

What I am trying to do:

dynamically build a onclick event attached to an img tag and pass 3 values. The problem is that the onclick is within a loop so the value of the passed values change depending on their position within the loop.

I have managed to get one value passed by attaching it to the img id, but im at a loss as to how to pass the other two

newElement.innerHTML = '<img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id,\"" + VideoTitlePlayer + "\","' + VideodescPlayer + '")" src="' + thumbnail +'"><div id="VideoNames" class="VideoTitle">'+ title +'<br><div class="VideoDescription">' + desc + '</div></div>';

OK so this is the issue
This function is called to build a menu of youtube videos

$.each(playlistVideoItems, function (index, item) 
            {
            displayVideoResult(item.snippet, item.snippet.resourceId.videoId);
            });

function displayVideoResult(videoSnippet, VideoPlay) 
{ var title = videoSnippet.title;
var desc = videoSnippet.description;
var thumbnail = videoSnippet.thumbnails.default.url;
var id = VideoPlay;

var newElement = document.createElement("div");
newElement.setAttribute("class", "VideoContainerCSS");
    // Set the value to what you want
  newElement.innerHTML = '<img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id)" src="' + thumbnail +'"><div id="VideoNames" class="VideoTitle">'+ title +'<br><div class="VideoDescription">' + desc + '</div></div>';

document.getElementById("results").appendChild(newElement);
}

I need some way to build into the link the videoID, video Title and Video desc so when the img link is clicked it passes all 3 to a function that runs the youtube api

Maybe you should post the entire loop, so we can understand what you're talking about ? — adeneo
– adeneo, Commented Sep 4, 2017 at 21:06

Sam R · Accepted Answer · 2017-09-04 21:08:02Z

1

Since you have jQuery, you can avoid using onclick and use a jQuery selector and event handler.

Once you have created the elements, use a jQuery selector to capture them. Better yet, use one on the container that uses a delegated event style.

You might need to change the markup just a bit to get the strings, though.

$('.container').on('click', 'img', function(e) {
  var $el = $(this);
  myFunction(this.id, $el.find('.VideoTitle').text(), $el.find('. VideoDescription').text());
});

Using this format you can create one event handler that supports all your elements.

answered Sep 4, 2017 at 21:08

Sam R

7023 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Seamus Clarke Over a year ago

jquery isnt my first language lol but how will this allow me to build the menu with each title and desc?

Sam R Over a year ago

@SeamusClarke This doesn't build the menu. That still happens separately. I'll update my answer to provide more detail

Marcin Malinowski · Accepted Answer · 2017-09-04 21:12:18Z

0

just use data-id, data-video-title, data-other-prop etc. then onclick="myFunction(this.dataset, ...

edited Sep 4, 2017 at 21:12

answered Sep 4, 2017 at 21:06

Marcin Malinowski

7955 silver badges13 bronze badges

2 Comments

Seamus Clarke Over a year ago

tried this but when this.data-video-title and data-other-prop are referenced in the onclick its not firing,

Seamus Clarke Over a year ago

completly my fault I was trying to pass the values, took your soluction and instead of passing this.dataset I just passed the whole object onclick="myFunction(this.dataset)" and works a treat, Thanks Alot Seamus

Collectives™ on Stack Overflow

build onclick inside a loop Javascript/jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related