Question 266669 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – I used for loop in onclick event but doesnt triggered the last element

I used for loop function to click all elements like

for(let i = 0; i < elements.length; i++)

then I used
elements[i].onclick () =>{...Code .. }

Then it perfectly works but if you click the last part of element, it doesn’t triggered.
I want to make the code that if the user click the thumbnail or title, the link or videoID will put on the iFrame. But I will not include the iFrame here, instead I using alert() function

Here’s my code.

fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=AIzaSyDL4P5BqSx4p-juYifPzaoNJ_8WAZSprc4')
  .then(res => res.json())
  .then(data => {
    JSON.stringify(data.items.forEach((el) => {
      var ChannelID = [el.snippet.resourceId.videoId];
      var Thumbnails = [el.snippet.thumbnails.medium.url];
      var Titles = [el.snippet.title];

      function createTags() {
        const Blogs = $('#Main');
        for (let i = 0; i < ChannelID.length; i++) {
          const Tags = `
                      <div class="Content">
                      <input value="">
                          <div class="Thumbnails">
                      <img src=""/>
                          </div>
                          <div class="Titles">
                      <p></p>
                          </div>      
                      </div>
                    `
          var VideoData = $(Tags);
          VideoData.find('input').attr("value", ChannelID[i]);
          VideoData.find('img').attr("src", Thumbnails[i]);
          VideoData.find('p').text(Titles[i]);
          Blogs.append(VideoData);
        }
      }
      var Cont = document.getElementsByClassName("Content")
      for (let i = 0; i < Cont.length; i++) {
        Cont[i].onclick = () => {
          let imageURL = Cont[i].querySelector("input").value;
          alert("You clicked this video that has a channel ID of:" + imageURL);
        }
      }
      createTags();
    }));
  });
* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

#Main {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  margin-top: 10px;
  align-items: center;
}

.Content {
  width: 90%;
  background: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  gap: 10px;
}

.Thumbnails {
  width: 100%;
  height: 161px;
  background: blue;
}

.Titles {
  width: 100%;
  height: 30%;
  background: red;
  overflow: hidden;
  padding: 8px;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

p {
  height: 20%;
  width: 100%;
  font-size: 16px;
  color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

input {
  position: absolute;
  width: 76%;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="./app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div id="Main">

  </div>
</body>

</html>

Anyway, I coding this in my mobile device so I suggest you to minimize your screen of your laptop/desktop until 500px.

Tags:

2

Answers


  1. 0

    You should move the loop to assign the click handler outside of the data.items.forEach:

    fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=<secret>')
.then(res => res.json())
.then(data => {
    JSON.stringify(data.items.forEach((el) => {
    var ChannelID = [el.snippet.resourceId.videoId];
    var Thumbnails = [el.snippet.thumbnails.medium.url];
    var Titles = [el.snippet.title];

    function createTags() {
        const Blogs = $('#Main');
        for (let i = 0; i < ChannelID.length; i++) {
        const Tags = `
                    <div class="Content">
                    <input value="">
                        <div class="Thumbnails">
                    <img src=""/>
                        </div>
                        <div class="Titles">
                    <p></p>
                        </div>      
                    </div>
                    `
        var VideoData = $(Tags);
        VideoData.find('input').attr("value", ChannelID[i]);
        VideoData.find('img').attr("src", Thumbnails[i]);
        VideoData.find('p').text(Titles[i]);
        Blogs.append(VideoData);
        }
    }

    createTags();
    }));
    var Cont = document.getElementsByClassName("Content")
    for (let i = 0; i < Cont.length; i++) {
    Cont[i].onclick = () => {
        let imageURL = Cont[i].querySelector("input").value;
        alert("You clicked this video that has a channel ID of:" + imageURL);
    }
    }
});

    Note: I replaced your key by <secret>.

    Login or Signup to reply.
  2. 0

    There are numerous issues in your code, one of them is recreating the template every time inside the forEach function. Also there is no need of createTags function. And since you are using jquery you can simple use $('Content').click to add the event listener to it

    const Blogs = $('#Main');
const Tags = `
                      <div class="Content">
                      <input value="">
                          <div class="Thumbnails">
                      <img src=""/>
                          </div>
                          <div class="Titles">
                      <p></p>
                          </div>      
                      </div>
                    `
fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=AIzaSyDL4P5BqSx4p-juYifPzaoNJ_8WAZSprc4')
  .then(res => res.json())
  .then(data => {
    data.items.forEach((el) => {
      let ChannelID = [el.snippet.resourceId.videoId];
      let Thumbnails = [el.snippet.thumbnails.medium.url];
      let Titles = [el.snippet.title];
      let VideoData = $(Tags);
      VideoData.find('input').attr("value", ChannelID);
      VideoData.find('img').attr("src", Thumbnails);
      VideoData.find('p').text(Titles);
      Blogs.append(VideoData);
    });
    $('.Content').click(function(e) {
      let imageURL = e.target.value;
      alert("You clicked this video that has a channel ID of:" + imageURL);
    })
  });
    * {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

#Main {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  margin-top: 10px;
  align-items: center;
}

.Content {
  width: 90%;
  background: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  gap: 10px;
}

.Thumbnails {
  width: 100%;
  height: 161px;
  background: blue;
}

.Titles {
  width: 100%;
  height: 30%;
  background: red;
  overflow: hidden;
  padding: 8px;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

p {
  height: 20%;
  width: 100%;
  font-size: 16px;
  color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

input {
  position: absolute;
  width: 76%;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Main">

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search