在不同的 html 页面上单击链接后，如何更改 html 页面的 .innerHTML？答案

【问题标题】：how do i change the .innerHTML of a html page after a link has been clicked on a different html page?在不同的 html 页面上单击链接后，如何更改 html 页面的 .innerHTML？
【发布时间】：2022-02-10 07:51:11
【问题描述】：

我有一个我正在尝试解决的问题。我正在尝试重新创建资本梦想图片here is the page 的音乐视频页面（第 1 页）。现在的问题是，当您单击播放按钮时，它会将您带到与单击的链接 here is the link for that 相对应的不同视频页面（第 2 页）。我不想为音乐视频页面（第 1 页）上的每个链接单独编写该页面（第 2 页）。当我单击（第 1 页）上的播放按钮链接时，有什么方法可以更改（第 2 页）的内容。

这里是（第 1 页）的代码。注意我使用 javascript 渲染图像

<body class="body">
    <header>
        <p>your logo</p>
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="video.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="musicvid.html" class="nav-link">Music Videos</a></li>
                <li class="nav-item"><a href="film.html" class="nav-link">Film</a></li>
                <li class="nav-item"><a href="showreels.html" class="nav-link">Show Reels</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
        </nav>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </header>
    <h3>
        <p>music videos</p>
    </h3>
    <main>
        <section  class="dera">
            <!--------------------render images here hopefully -------------->
        </section>
    </main>
    
    <footer>
        <p>
            Copyright Simple <small>2021 - </small>
        <small id="demo"> </small>
        </p>
    </footer>
    <script>
        const d = new Date ();
        document.getElementById("demo").innerHTML = d.getFullYear();
    </script>
    <script src="array.js"></script>
    <script src="video.js"></script>
    </body>

这是（第 2 页）的 html

<body>
    <header>
        <p>your logo</p>
        <nav class="navbar">
            <ul class="nav-menu">
                <li class="nav-item"><a href="video.html" class="nav-link">Home</a></li>
                <li class="nav-item"><a href="musicvid.html" class="nav-link">Music Videos</a></li>
                <li class="nav-item"><a href="film.html" class="nav-link">Film</a></li>
                <li class="nav-item"><a href="showreels.html" class="nav-link">Show Reels</a></li>
                <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
            </ul>
        </nav>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
        </div>
    </header>
    <h3>
        <p>video name here</p>
    </h3>

    <main>
    <div class="container">
        <div class="videocontainer">
            <iframe width="700" height="700" 
            src="https://www.youtube.com/embed/OFKBep95lb4" title="YouTube video player"
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
            </iframe>
        </div>

        <div class="cat-container">
            <div class="cart-contain">
                <div class="category">
                    <p><b>category</b>: <span>Music Videos</span></p>
                </div>
                <div class="date">
                    <p><b>date</b>: <span>December 31, 2020</span></p>
                </div>
            </div>
        </div>
    </div>
    </main>
    <section>
        <div class="join">
            <p>previous</p>
            <i class="fab fa-instagram"></i>
            <p>next</p>
        </div>
    </section>
    <footer>
        <p>
            Copyright Simple <small>2021 - </small>
            <small id="demo"> </small>
        </p>
        <a href="music-page.html"><i class="fas fa-play"></i></a>
    </footer>
    <script>
        const d = new Date();
        document.getElementById("demo").innerHTML = d.getFullYear();
    </script>
    <script src="array.js"></script>
    <script src="video.js"></script>

数组

 const images = [
    {
        id: 0,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 1,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 2,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 3,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 4,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 5,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 6,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 7,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 8,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 9,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 10,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 11,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 12,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 13,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 14,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 15,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 16,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },

    {
        id: 17,
        videoName: "patoranking song",
        category: "first",
        href: "music-page.html",
        imgsrc: "img/background.jpg",
    },
]

const images1 = [
    {
        id: 0,
        chidera: "https://www.youtube.com/embed/OFKBep95lb4",
    },

    {
        id: 1,
        chidera: "https://www.youtube.com/embed/JqFrYYIKl_4",
    },

    {
        id: 2,
        chidera: "https://www.youtube.com/embed/OFKBep95lb4"
    },

]

javascript

// select elements
    const burger =  document.querySelector(".burger");
    const navMenu = document.querySelector(".nav-menu");
    const navLink = document.querySelectorAll(".nav-link")

    burger.addEventListener("click",   function () {
   //toggles the burger
    burger.classList.toggle("is-active");

   //toggles the nav menu
    navMenu.classList.toggle("active");
});
    //removes well, you should know
    navLink.forEach(n =>  n.addEventListener("click", function () {
  burger.classList.remove("is-active");
  navMenu.classList.remove("active");
}))

//wahala dey to render images like this. somebody save me!!!!!!!!!
//this actually worked
    const dera = document.querySelector(".dera");
    const videoContainer = document.querySelector(".videocontainer");

    function renderImages() {
    images.forEach((image) => {
    dera.innerHTML += `<div>
                <!--------render images   here hopefully -->
                <img  src="${image.imgsrc}" alt="">
                <p>${image.videoName}</p>
                <samp> Music Videos </samp>
                <a href="${image.href}" ><i class="fas fa-play fa-3x"></i></a>
            </div>
            `
  })
}
    renderImages();

    //when users click on the play button,
    //i want to change the .innerHTML of the music video page :)
    //for music page thing
    //this is a massive fail tho
    console.log(videoContainer)
    const playButton = document.getElementsByTagName("i");
    const arr = [...playButton];
    console.log(arr)
    arr.forEach((button) => {
  button.addEventListener("click",  function () {
     images1.forEach((_thing) => {
      if (image.id === _thing.id) {
        videoContainer.innerHTML += `
            <iframe width="700"  height="700" 
            src="${_thing.chidera}" title="YouTube video player"
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
            </iframe>
    `
      }
      else {
        alert('jdhcodshdioshdioES')
      }
    })
  })
  });

请问，我该怎么做？谢谢你:)

【问题讨论】：

标签： javascript html css arrays

【解决方案1】：

如果我正确解释了您的问题，您希望有 1 个页面显示音乐视频，但要使其动态化，这样您就不需要为每个页面制作单独的文档。传统上，这将通过在 url 查询字符串中使用视频 id 进行服务器端渲染来解决，但您也可以使用 javascript 在客户端上执行此操作。

例如，您可以有一个页面http://localhost/video.html，并在Query String（即http://localhost/video.html?id=15）中传递您想要显示的确切视频。然后，您可以使用 javascript 从 URL 中获取 id，如下所示：

const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');

【讨论】：

非常感谢。我能够使用它，结合一个 forEach 循环和一个 if 语句来让它工作。我真的很感激。