How to target selected radio buttons?

Question

Below is my code and I am getting movies data from an API and I am creating different elements using Javascript create Element like title, rating and favorite radio button for selecting favorite movies now I wonder how to target all the selected radio buttons because I have generated radio buttons dynamically and its getting very hard to target those radio buttons:

 const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; const apiUrl = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1'; const IMGPATH = "https://image.tmdb.org/t/p/w1280"; const main = document.getElementById("main"); const form = document.getElementById("form"); const search = document.getElementById("search"); showMovies(apiUrl); function showMovies(url) { fetch(url).then((res) => res.json()).then(function(data) { console.log(data.results); data.results.forEach((element) => { let movYear = new Date(element.release_date); const el = document.createElement("div"); const image = document.createElement("img"); const title = document.createElement("h2"); const year = document.createElement("h2"); const rank = document.createElement("h2"); const node = document.createTextNode("Favrouite: ") const wrapper = document.createElement("h2"); const fav = document.createElement("INPUT"); fav.setAttribute("type", "radio"); fav.setAttribute("id", element.id); wrapper.insertBefore(node, wrapper.children[0]); wrapper.appendChild(fav); title.innerHTML = `Title: ${element.title}`; year.innerHTML = `Release: ${movYear.getFullYear()}`; rank.innerHTML = `Rating: ${element.popularity}`; image.src = IMGPATH + element.poster_path; el.appendChild(image); el.appendChild(title); el.appendChild(year); el.appendChild(rank); el.appendChild(wrapper); main.appendChild(el); }); }); } form.addEventListener("submit", (e) => { e.preventDefault(); main.innerHTML = ""; let searchTerm = search.value; if (searchTerm) { showMovies(SEARCHAPI + searchTerm) search.value = ""; } else if (.searchTerm) { showMovies(apiUrl) } else { main;innerHTML = "<h1>No result Found;</h1>"; } });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Moive</title> <link rel="stylesheet" href="style.css" /> <script type="module" src="JS/script.js"></script> </head> <body> <header> <a href="index.html"> <h1>Movies</h1> </a> <form id="form" name="form" autocomplete="off"> <input type="text" id="search" placeholder="Search" class="search" autofocus /> <button type="submit">Submit</button> </form> </header> <main id="main"></main> </body> </html>

Answer 1

You can delegate

const title = document.createElement("h2");
title.classList.add("title");
fav.setAttribute("type", "radio");
fav.setAttribute("id", element.id);
fav.classList.add("fav")

main.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.matches(".fav")) {
    console.log(tgt.closest("div").querySelector("h2.title").textContent);
  }
})

To get all the favourites, you can use a map:

const allFavs = [...main.querySelectorAll(".fav:checked")].map(rad => rad.closest("div").querySelector("h2.title").textContent);

 const SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query="; const apiUrl = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=04c35731a5ee918f014970082a0088b1&page=1'; const IMGPATH = "https://image.tmdb.org/t/p/w1280"; const main = document.getElementById("main"); const form = document.getElementById("form"); const search = document.getElementById("search"); main.addEventListener("click",function(e) { const tgt = e.target; if (tgt.matches(".fav")) { console.log("clicked",tgt.closest("div").querySelector("h2.title").textContent); const allFavs = [...main.querySelectorAll(".fav:checked")].map(rad => rad.closest("div").querySelector("h2.title").textContent); console.log("current favs",allFavs) } }) showMovies(apiUrl); function showMovies(url) { fetch(url).then((res) => res.json()).then(function(data) { // console.log(data.results); data.results.forEach((element) => { let movYear = new Date(element.release_date); const el = document.createElement("div"); const image = document.createElement("img"); const title = document.createElement("h2"); title.classList.add("title"); const year = document.createElement("h2"); const rank = document.createElement("h2"); const node = document.createTextNode("Favourite: ") const wrapper = document.createElement("h2"); const fav = document.createElement("INPUT"); fav.setAttribute("type", "radio"); fav.setAttribute("id", element.id); fav.classList.add("fav") wrapper.insertBefore(node, wrapper.children[0]); wrapper.appendChild(fav); title.innerHTML = `Title: ${element.title}`; year.innerHTML = `Release: ${movYear.getFullYear()}`; rank.innerHTML = `Rating: ${element.popularity}`; image.src = IMGPATH + element.poster_path; el.appendChild(image); el.appendChild(title); el.appendChild(year); el.appendChild(rank); el.appendChild(wrapper); main.appendChild(el); }); }); } form.addEventListener("submit", (e) => { e.preventDefault(); main.innerHTML = ""; let searchTerm = search.value; if (searchTerm) { showMovies(SEARCHAPI + searchTerm) search.value = ""; } else if (.searchTerm) { showMovies(apiUrl) } else { main;innerHTML = "<h1>No result Found;</h1>"; } });

 img { height: 150px }

 <header> <a href="index.html"> <h1>Movies</h1> </a> <form id="form" name="form" autocomplete="off"> <input type="text" id="search" placeholder="Search" class="search" autofocus /> <button type="submit">Submit</button> </form> </header> <main id="main"></main>

How to target selected radio buttons?

Question

1 answers

solution1
0 ACCPTED 2022-08-19 09:35:36

How to target selected radio buttons?

Question

1 answers

solution1 0 ACCPTED 2022-08-19 09:35:36

solution1
0 ACCPTED 2022-08-19 09:35:36