it's a pretty easy thing to do (Apparently) but I can't make it happen. I've been sitting on it for 4 days straight.. and kind of tried anything I had in my toolbox.
I need to make 2 buttons (which I already did) and connect them both into the 2 iframes that I have created beforehand. now, I need to make them communicate with each other, and when the user clicks "next" it will go to the next location on the map. (the next Iframe). also, when the next iframe is now displayed, the "prev" button needs to be enabled and ready to mingle.
my HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ITC precourse - About</title>
<link href="/css/about.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>
<body>
<div class="nav">
<ul class="navUl">
<li class="navOne"><a href="/index.html">Home</a></li>
<li class="navTwo"><a href="./contact.html">Contact</a></li>
<li class="navThree"><a href="./about.html">About</a></li>
</ul>
</div>
<div class="container">
<div class="card">
<div class="circle">
<h2>About</h2>
</div>
<div class="content">
<p><i>
<B> <I> A web development student at the “Start-line” program,</I></B> <br>
<B> <I> Soon to be studying at “Israel tech challenge” college.</I></B> <br> <BR>
<B> <I> Inspired, motivated, dedicated, driven.</I></B>
</p>
<a href="noLink">read more</a>
</div>
</div>
<div class="card">
<div class="circle">
<h2>why coding?</h2>
</div>
<div class="content">
<p>you know the feeling that u coded something and it turns to be better than u imagined it? <br>
that feeling that you really created something out of thin air? <br>
crystallized knowledge into executable form using the awesome power of your mind alone? <br> <b> <i>
It's raw power, baby. </i> </b>
</p>
<a href="noLink"> Code-Of-Love</a>
</div>
</div>
<div class="card">
<div class="circle">
<h2>More Info</h2>
</div>
<div class="content">
<P>
<i> <b>Start-Line "Full-Stack development" mini-Course</b><br>
given by "Aviel-Bitton" <br>
Mainly html / CSS, and fundmentals of Java-Script. <br>
</i> </b> <br>
when i'm not coding i like to spend time with my dogs,
try new food types with my girlfriend, and watch netflix. <br>
i also work as a Solar-Panel installer.
</p>
<a href=noLink></a>
</div>
</div>
</div>
<div class="gmap_canvas">
<iframe class="myIframe" width="700" height="550"
id="gmap active" src="https://maps.google.com/maps?q=jerusalem&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
<iframe class="myIframe active" width="700" height="550"
id="gmap" src="https://maps.google.com/maps?q=eilat&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="2" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
</div>
</div>
</section>
</div>
<button disabled class="prevBtn">Prev
</button>
<button class="nextBtn">Next
</button>
<script src="/js/maps.js"></script>
</body>
</html>
my CSS code:
.gmap_canvas{
position: absolute;
right: 1200px;
bottom: 12px;
top: 200px;
display: flex;
justify-content: center;
}
.myIframe {
display: none;
}
.active{
display: block;
}
.mapHeader{
position: absolute;
display: grid;
width: 120px;
height: 60px;
right: 230px;
top: 150px;
color: #938a7f;
}
.prevBtn
{
left: 50px;
position: absolute;
margin-right: 20px;
bottom: 780px;
left: 56px;
width: 120px;
height: 12px;
padding: 30px;
padding-top: 5px;
margin-right: 1000px;
font-weight: 850px;
font-size: 25px;
background-color: none;
background: linear-gradient(45deg, #e6cda9, #ada599 );
-webkit-background-clip: text;
}
.nextBtn{
left: 50px;
position: absolute;
margin-right: 20px;
bottom: 780px;
left: 220px;
width: 120px;
height: 12px;
padding: 30px;
padding-top: 5px;
margin-right: 1000px;
font-weight: 850px;
font-size: 25px;
background-color: none;
background: linear-gradient(45deg, #e6cda9, #ada599 );
-webkit-background-clip: text;
}
my JS code:
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
let map = document.querySelectorAll('.gmap');
let currentlySelected = 0;
nextBtn.addEventListener("click", function () {
map[currentlySelected].classList.remove("active");
currentlySelected ++;
map[currentlySelected].classList.add("active");
prevBtn.disabled = false
});
the error i am getting in the browser:
Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
what am i doing wrong here? could someone please help me?