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 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>
here is the html for (page 2)
<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>
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 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')
}
})
})
});
please, how do i go about it? Thank you 🙂