how do i change the .innerHTML of a html page after a link has been clicked on a different html page-CodePudding

i have a problem i am trying to solve. i am trying to recreate the music video page (page 1) of Capital dreams pictures here is the page. the issue have now is that, when you click on the play button, it takes you to a different video page (page 2) corresponding to the link clicked here is the link for that. i don't want to single handedly code that page (page 2) for each of the link on the music video page (page 1). is there a way i can change the content of (page 2) when i click the play button link on (page 1).

here is the code for (Page 1). N.B i render the images using javascript

<body >
    <header>
        <p>your logo</p>
        <nav >
            <ul >
                <li ><a href="video.html" >Home</a></li>
                <li ><a href="musicvid.html" >Music Videos</a></li>
                <li ><a href="film.html" >Film</a></li>
                <li ><a href="showreels.html" >Show Reels</a></li>
                <li ><a href="contact.html" >Contact</a></li>
            </ul>
        </nav>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </header>
    <h3>
        <p>music videos</p>
    </h3>
    <main>
        <section  >
            <!--------------------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>

here is the html for (page 2)

<body>
    <header>
        <p>your logo</p>
        <nav >
            <ul >
                <li ><a href="video.html" >Home</a></li>
                <li ><a href="musicvid.html" >Music Videos</a></li>
                <li ><a href="film.html" >Film</a></li>
                <li ><a href="showreels.html" >Show Reels</a></li>
                <li ><a href="contact.html" >Contact</a></li>
            </ul>
        </nav>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
    </header>
    <h3>
        <p>video name here</p>
    </h3>

    <main>
    <div >
        <div >
            <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 >
            <div >
                <div >
                    <p><b>category</b>: <span>Music Videos</span></p>
                </div>
                <div >
                    <p><b>date</b>: <span>December 31, 2020</span></p>
                </div>
            </div>
        </div>
    </div>
    </main>
    <section>
        <div >
            <p>previous</p>
            <i ></i>
            <p>next</p>
        </div>
    </section>
    <footer>
        <p>
            Copyright Simple <small>2021 - </small>
            <small id="demo"> </small>
        </p>
        <a href="music-page.html"><i ></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>

the array

 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"
    },

]

the 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 ></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')
      }
    })
  })
  });

please, how do i go about it? Thank you :)

CodePudding user response：

If I'm interpreting your question correctly, you want to have 1 page that displays a music video, but make it dynamic so that you dont need to make separate documents for each one. Traditionally this would be solved by server side rendering with a video id in the url query string, but you could also do it on the client using javascript.

For example you could have a page http://localhost/video.html, and pass in the exact video you want to display in the Query String (i.e. http://localhost/video.html?id=15). You can then use the javascript to get the id from the url like so:

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