如何将链接添加到“标题”或“图像”

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.当我单击电影或图像的标题时，我想将 go 转到下一页“moviesOnline.html”。

<!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.当我单击电影或图像的标题时，我想将 go 转到下一页“moviesOnline.html”。

Answer 1

Here's my solution using JS, just change your URL in the function.这是我使用JS的解决方案，只需在function中更改您的URL。 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>

Answer 2

You could surround the <image> with the <a> element which will allow elements inside the <a> to link other sources.您可以用<a>元素围绕<image>元素，这将允许<a>内的元素链接其他来源。

Here is another StackOverflow question for more informamtion .这是有关更多信息的另一个 StackOverflow 问题。

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);
        }); 
    });
}

如何将链接添加到“标题”或“图像”

问题描述

2 个解决方案

解决方案1
3 2021-05-05 04:53:24

解决方案2
2 2021-05-05 04:26:36

如何将链接添加到“标题”或“图像”

问题描述

2 个解决方案

解决方案1 3 2021-05-05 04:53:24

解决方案2 2 2021-05-05 04:26:36

解决方案1
3 2021-05-05 04:53:24

解决方案2
2 2021-05-05 04:26:36