How can I add the link to "Title" or "image"

Question

Is there a way to add the link to Title or image. I want to go to the next page "moviesOnline.html" when I click on the title of the movie or image.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
  <title>Movie App vanilla Javascript.</title>
  <link rel="stylesheet" href="practice.css">

</head>
<body>
  <header>
    <img src="tv.svg" alt="" class="logo">
    <a href="practice.html"><h1>Movies</h1></a>
    <a href="practice.html"><h2>Home</h2></a>
    <form id="form">
      <input type="text" id="search" placeholder="Search" class="search" />
    </form>
  </header>
  <main id="main"></main>
  <script  src="practice.js"></script>
</body>
</html>




 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 SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

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 => {
        const el = document.createElement('div');
        const image = document.createElement('img');
        const text = document.createElement('h2');
        text.innerHTML = element.title;
        image.src = IMGPATH + element.poster_path;
        el.appendChild(image);
        el.appendChild(text);
        main.appendChild(el);
    }); 
});
}


form.addEventListener("submit", (e) => {
    e.preventDefault();
    main.innerHTML = '';
     
    const searchTerm = search.value;

    if (searchTerm) {
        showMovies(SEARCHAPI + searchTerm);
        search.value = "";
    }
});

Is there a way to add the link to Title or image. I want to go to the next page "moviesOnline.html" when I click on the title of the movie or image.

score 3 · Answer 1 · answered May 05 '21 at 04:53

Here's my solution using JS, just change your URL in the function. I've added comments for it.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
  <title>Movie App vanilla Javascript.</title>
  <link rel="stylesheet" href="practice.css">

</head>
<body>
  <header>
    <img src="tv.svg" alt="" class="logo">
    <a href="practice.html"><h1>Movies</h1></a>
    <a href="practice.html"><h2>Home</h2></a>
    <form id="form">
      <input type="text" id="search" placeholder="Search" class="search" />
    </form>
  </header>
  <main id="main"></main>
  <script  src="practice.js"></script>
</body>
<script>
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 SEARCHAPI = "https://api.themoviedb.org/3/search/movie?&api_key=04c35731a5ee918f014970082a0088b1&query=";

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 => {
        const el = document.createElement('div');
        const image = document.createElement('img');
        const text = document.createElement('h2');
        text.innerHTML = element.title;
        image.src = IMGPATH + element.poster_path;
        el.appendChild(image);
        el.appendChild(text);
        
        let callBack = (function(element){
            return function(event){
                event.preventDefault();
                console.log(element);
                let nextURL = "moviesOnline.html"; //Change this URL dynamically, I'm assuming you are getting the next URL in the element
                window.open(nextURL);
            }
        })(element);
        image.addEventListener("click",callBack);
        
        text.addEventListener("click",callBack);
        
        main.appendChild(el);
    }); 
});
}


form.addEventListener("submit", (e) => {
    e.preventDefault();
    main.innerHTML = '';
     
    const searchTerm = search.value;

    if (searchTerm) {
        showMovies(SEARCHAPI + searchTerm);
        search.value = "";
    }
});
</script>
</html>

Thank you so much man it works now. I really appreciate your help — Cj Kapas, May 05 '21 at 05:03
quick question how do I take the only data I click to the next page. for ex if I click on a movie I just want that movie image to show on the next page with image — Cj Kapas, May 05 '21 at 05:54
U can try passing the movie image URL to the query params or U can try something like this. var myWindow = window.open("yourURL"); myWindow.document.write("
I replaced the window.
"); //change the content as per ur need. Or u can try SPA framework like Angular, React, Vue etc. — Root, May 05 '21 at 14:10
Please click on the accept button if the solution solves ur question — Root, May 05 '21 at 14:18

Tangy · Answer 2 · 2021-05-05T05:09:21.767

2

You could surround the <image> with the <a> element which will allow elements inside the <a> to link other sources.

Here is another StackOverflow question for more informamtion.

Example:

function showMovies(url){
    fetch(url).then(res => res.json())
    .then(function(data){
    console.log(data.results);
    data.results.forEach(element => {
            const el = document.createElement('a'); // edited line
            const image = document.createElement('img');
            const text = document.createElement('h2');
            text.innerHTML = element.title;
            image.src = IMGPATH + element.poster_path;
            el.href = "moviesOnline.html"; // edited line
            el.appendChild(image);
            el.appendChild(text);
            main.appendChild(el);
        }); 
    });
}

edited May 05 '21 at 05:09

answered May 05 '21 at 04:26

Tangy

85
9

can you please drop the snipped I'm little lost? – Cj Kapas May 05 '21 at 04:39
no problem, tell me if you any more issues ^^ – Tangy May 05 '21 at 04:42
Sorry, I don't think I explain it correctly, I want to know how to add the link to the API output. I get movie images and name as output and when I click on that output I want it to take me to another page "movies.html". Sorry again about the grammar English isn't my first language. – Cj Kapas May 05 '21 at 04:51

How can I add the link to "Title" or "image"

2 Answers2