What i am trying to do is create a webpage with mercury's image attached to it('planet1.jpg') and i created two button 'left' and 'right' that when clicked should change the img src to the planet right or left to it. I use function leftClick() and rightClick() to calculate where it's position is and change src accordingly. i couldn't find what i did wrong. Please help!
// External JavaScript file
// that i linked using script tag
let pos = 0;
function leftClick() {
if (pos > 0) {
pos--;
planetName();
} else {
continue;
}
}
function rightClick() {
if (pos < 7) {
pos++;
planetName();
} else {
continue;
}
}
function planetName() {
switch (pos) {
case 0:
document.getElementById("planetImage").src = "planet1.jpg";
break;
case 1:
document.getElementById("planetImage").src = "planet2.jpg";
break;
case 2:
document.getElementById("planetImage").src = "planet3.webp";
break;
case 3:
document.getElementById("planetImage").src = "planet4.jpg";
break;
case 4:
document.getElementById("planetImage").src = "planet5.jpg";
break;
case 5:
document.getElementById("planetImage").src = "planet6.jpg";
break;
case 6:
document.getElementById("planetImage").src = "planet7.jpg";
break;
case 7:
document.getElementById("planetImage").src = "planet8.jpg";
break;
}
}<button onclick="leftClick()">LEFT</button>
<img src="planet1.jpg" id="planetImage" width="480" height="520" align="center">
<button onclick="rightClick()">RIGHT</button>It looks like that continue; was causing an issue & once removed it works as expected:)
// External JavaScript file
// that i linked using script tag
let pos = 0;
function leftClick() {
if (pos > 0) {
pos--;
planetName();
}
}
function rightClick() {
if (pos < 7) {
pos++;
planetName();
}
}
function planetName() {
switch (pos) {
case 0:
document.getElementById("planetImage").src = "https://metalinjection.net/wp-content/uploads/2019/04/davidhasselhoff.jpg";
break;
case 1:
document.getElementById("planetImage").src = "https://www.al.com/resizer/x0sDT9S7MVuLoZdAckv4GYrEay8=/1280x0/smart/advancelocal-adapter-image-uploads.s3.amazonaws.com/image.al.com/home/bama-media/width2048/img/entertainment_impact/photo/22643993-large.jpg";
break;
case 2:
document.getElementById("planetImage").src = "https://www.mensjournal.com/wp-content/uploads/2016/03/Hoff.jpg?quality=86&strip=all";
break;
default:
break;
}
}<button onclick="leftClick()">LEFT</button>
<img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/03/03/11/Baywatch-The-Hoff.jpg?width=1200" id="planetImage" width="480" height="520" align="center">
<button onclick="rightClick()">RIGHT</button>