ایجاد متغییر در forEach javascript

سلام من یک اسکریپت دارم که از omdb چند فیلم رو دریافت می‌کنه و میشه از بینشون انتخاب کرد و بعد id اون هارو می‌فرسته به سرور
اسکریپت اینه:

  
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Movies Sorter by IMDb Ratings</h1>
 
    <main class="content">
      <div id="search">
        <input type="text" id="search-input">
        <button onclick="handleSearch()">Search</button>
        <h2 id="search-data-title">Search Results</h2>
        <div id="search-data"></div>
        <button onclick="handleAddMovie()">Add</button>  
      </div>
 
      <div id="output">
        <h2>Final List</h2>
        <div id="output-area">
        </div>
        <button onclick="handleSortMovies()">ارسال برای دریافت</button>
      </div>
 
    </main>
 
  </body>
</html>
<script>
const baseUrl = "https://www.omdbapi.com/";
var finalMovieList = [];
 
async function handleSearch() {
  const searchedMovie = document.getElementById("search-input").value;
 
  if (searchedMovie) {
    const response = await (
      await fetch(`${baseUrl}?apikey=1a72b1e4&s=${searchedMovie}`)
    ).json();
    const data = response.Search;
 
    const resultsArea = document.getElementById("search-data");
    resultsArea.innerHTML = "";
 
    data.forEach((movie) => {
      const div = document.createElement("div");
      div.className = "movie";
 
      const input = document.createElement("input");
      input.type = "checkbox";
      input.id = movie.imdbID;
const img  = document.createElement("img");
img.style.width="50px";
img.style.height="100%";
    img.src = movie.Poster;
      const span = document.createElement("span");
      span.innerText = movie.Title;
 
      div.appendChild(input);
      div.appendChild(img);
      div.appendChild(span);
 
      resultsArea.appendChild(div);
    });
  }
 
  document.getElementById("search-input").value = "";
}
 
function handleAddMovie() {
  const resultsArea = document.getElementById("search-data");
  const searchedMovies = Array.from(resultsArea.childNodes);
 
  searchedMovies.forEach((movie) => {
    if (movie.firstChild.checked) {
      finalMovieList.push({
        id: movie.firstChild.id,
        title: movie.lastChild.textContent,
      });
    }
 
    resultsArea.innerHTML = "";
  });
 
  renderFinalList();
}
function renderFinalList() {
  if (finalMovieList.length) {
    const listArea = document.getElementById("output-area");
    listArea.innerHTML = "";
 
    const list = document.createElement("ul");
    finalMovieList.forEach(({ id, title }) => {    
      const listItem = document.createElement("li");
  listItem.id = id;
      listItem.innerText = title;
      list.appendChild(listItem);
   });
    listArea.appendChild(list);
  }
}
function handleSortMovies(){ 
my_form=document.createElement('FORM');
my_form.name='movie';
my_form.method='GET';
my_form.action='omdb.php';
finalMovieList.forEach(({ id }) => {
my_tb=document.createElement('INPUT');
my_tb.type='TEXT';
my_tb.name= 'id';
my_tb.value= id ;
my_form.appendChild(my_tb); });
document.body.appendChild(my_form);
my_form.submit();
}
</script>

الان id های انتخابی با یک فرم و GET به omdb می‌فرسته
و لینک اینجور میشه:

omdb?id=tt0170016&id=tt0170016&id=...

من میخوام که درخواست ها اینجور ارسال بشه:

omdb?id=tt0170016&id2=tt0170016&id3=&id4=...

یعنی اولین id بشه ?id= ولی id های بعدی عدد داشته باشن مثلا id2= و id3= و...

الان میخوام که یک متغییر برای این کارم و ارسالش مثل لینک بالا باشه

ثبت پرسش جدید

به همدیگه کمک کنیم

به abol.sub کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

ایجاد متغییر در forEach javascript

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

به همدیگه کمک کنیم

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید


	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	</head>
	<body>
	<h1>Movies Sorter by IMDb Ratings</h1>

	<main class="content">
	<div id="search">
	<input type="text" id="search-input">
	<button onclick="handleSearch()">Search</button>
	<h2 id="search-data-title">Search Results</h2>
	<div id="search-data"></div>
	<button onclick="handleAddMovie()">Add</button>
	</div>

	<div id="output">
	<h2>Final List</h2>
	<div id="output-area">
	</div>
	<button onclick="handleSortMovies()">ارسال برای دریافت</button>
	</div>

	</main>

	</body>
	</html>
	<script>
	const baseUrl = "https://www.omdbapi.com/";
	var finalMovieList = [];

	async function handleSearch() {
	const searchedMovie = document.getElementById("search-input").value;

	if (searchedMovie) {
	const response = await (
	await fetch(`${baseUrl}?apikey=1a72b1e4&s=${searchedMovie}`)
	).json();
	const data = response.Search;

	const resultsArea = document.getElementById("search-data");
	resultsArea.innerHTML = "";

	data.forEach((movie) => {
	const div = document.createElement("div");
	div.className = "movie";

	const input = document.createElement("input");
	input.type = "checkbox";
	input.id = movie.imdbID;
	const img = document.createElement("img");
	img.style.width="50px";
	img.style.height="100%";
	img.src = movie.Poster;
	const span = document.createElement("span");
	span.innerText = movie.Title;

	div.appendChild(input);
	div.appendChild(img);
	div.appendChild(span);

	resultsArea.appendChild(div);
	});
	}

	document.getElementById("search-input").value = "";
	}

	function handleAddMovie() {
	const resultsArea = document.getElementById("search-data");
	const searchedMovies = Array.from(resultsArea.childNodes);

	searchedMovies.forEach((movie) => {
	if (movie.firstChild.checked) {
	finalMovieList.push({
	id: movie.firstChild.id,
	title: movie.lastChild.textContent,
	});
	}

	resultsArea.innerHTML = "";
	});

	renderFinalList();
	}
	function renderFinalList() {
	if (finalMovieList.length) {
	const listArea = document.getElementById("output-area");
	listArea.innerHTML = "";

	const list = document.createElement("ul");
	finalMovieList.forEach(({ id, title }) => {
	const listItem = document.createElement("li");
	listItem.id = id;
	listItem.innerText = title;
	list.appendChild(listItem);
	});
	listArea.appendChild(list);
	}
	}
	function handleSortMovies(){
	my_form=document.createElement('FORM');
	my_form.name='movie';
	my_form.method='GET';
	my_form.action='omdb.php';
	finalMovieList.forEach(({ id }) => {
	my_tb=document.createElement('INPUT');
	my_tb.type='TEXT';
	my_tb.name= 'id';
	my_tb.value= id ;
	my_form.appendChild(my_tb); });
	document.body.appendChild(my_form);
	my_form.submit();
	}
	</script>