It still isnt working. Here's my script:
Javascript
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM Content loaded.");
if (document.querySelector(".index")) {
let base_urls = "";
let image_size = "";
config();
console.log("1st file");
let search_button = document.querySelector("#indexbutton");//added let
console.log(search_button,typeof(search_button));
search_button.addEventListener("click", searched);
let url = "";
const api_key = "xxxx"; //tmdb api key
function searched() {
let dropdown=document.querySelector("#Language_dropdown");
let language=dropdown.options[dropdown.selectedIndex].value;
console.log("prev lang=",language);
sessionStorage.setItem("language",language);
console.log("Search entered");
const search = document.querySelector("#Movie_search_box");
const search_value = search.value;
movie_name = search_value;
url = `
https://api.themoviedb.org/3/search/mov ... =${api_key}`;
fetch(url)
.then(response => response.json())
.then(parsedata)
.catch(err => console.error(err));
}
function config() {
let configuration_url = "
https://api.themoviedb.org/3/configuration?api_key=xxxx";
fetch(configuration_url)
.then(response => response.json())
.then(response => {
base_urls = response.images.base_url;
console.log("base url =", base_urls);
image_size = response.images.poster_sizes[response.images.poster_sizes.length - 2];// handle image size
console.log("image size =", image_size);
})
.catch(err => console.error(err));
}
let movie_title;
let image_url;
let tmdb_id;
const img = document.querySelector(".card img");
const card_container = document.querySelector(".Results");
function parsedata(response) {
console.log(response);
card_container.innerHTML = "";
response.results.forEach(element => {
movie_title = element.original_title;
image_url = base_urls + image_size + "/" + element.backdrop_path;
tmdb_id=element.id;
console.log("Poster path", image_url);
const card = document.createElement("div");
card.classList = ["card"];
const card_content = `
<img src="${image_url}">
<h2>${movie_title}</h2>
<template>${tmdb_id}</template>`
card.innerHTML = card_content;
card_container.appendChild(card);
card.addEventListener("click", () => subpage(card));
});
}
function subpage(card) {
const children=card.children;
console.log("children=",children);
const img_src = children[0].src;
const mov_title = children[1].innerHTML;
const tmdb_id=children[2].innerHTML;
sessionStorage.setItem("img_src", img_src);
sessionStorage.setItem("mov_title", mov_title);
sessionStorage.setItem("tmdb id",tmdb_id);
window.open("subtitle.html", "_self");
}
//button.addEventListener("click", searched);
}
else {
console.log("2nd file");
const img_src = sessionStorage.getItem("img_src");
const mov_title = sessionStorage.getItem("mov_title");
const tmdb_id=sessionStorage.getItem("tmdb id");
const language=sessionStorage.getItem("language");
console.log(tmdb_id);
console.log(language);
const sec_img = document.querySelector(".subtitle .image_name img");
const sec_title = document.querySelector(".subtitle .image_name h2");
sec_img.src = img_src;
sec_title.innerHTML = mov_title;
document.title=mov_title;
const api_key_sub="xxxx"; //opensubtitles api key
const url_sub="
https://api.opensubtitles.com/api/v1/su ... _id=299534";
const options={
method:'GET',
Headers:{"Api-Key":api_key_sub,
"X-User-Agent":"Subtle/1.0",
"Accept":"application/json"}
};
fetch(url_sub,options)
.then(response =>response.json())
.then(response => console.log(response))
.catch(err => console.error(err));
const goback_button=document.querySelector(".subtitle .goback");
goback_button.addEventListener("click", () => {
window.history.back();
});
}
});
I have 2 html files sharing the same script based on if condition.