How do you use a button to change the image using Javascript

Question

I have a school assignment to build a website using HTML and JavaScript about the planets in the solar system. The website is only very basic but I'm a beginner in HTML and JavaScript. The website must contain two buttons called next planet and previous planet which change the text on the screen to either the next or previous planet.

For example if the text read "Earth" and the user pressed previous planet the text would then read "Venus".

I have the above criteria working, no problem, (thanks to this website) however the next section of the assignment is for a picture of the planet to appear when the planet is on the screen for that image to change depending on what planet is being shown.

Here's the working code for the two buttons that just change the text:

<html>
<head>
<body bgcolor="cyan">
<h1>The Solar System</h1>
<script>
var planets=["Mercury","Venus","Earth","Mars","Jupiter","Saturn","Uranus","Neptune"];
var endofplanets=planets.length;
var i =-1;

function nextplanet(){
i=i+1;
if(i==endofplanets){
i=0;
}
document.getElementById('p1').innerHTML=planets[i]
}
</script>
<script>
function previousplanet(){
i=i-1;
if(i<0){
i=endofplanets-1;}
document.getElementById('p1').innerHTML=planets[i];

}

</script>
<p id="p1">---</p>
<button type="button" onclick=nextplanet()>Next Planet</button>
<button type="button" onclick=previousplanet()>Previous Planet</button>
</body>
</head>
</html>

If anyone knows how to add code into this that would change the image when the button is pressed also it would be greatly appriciated

Community · Accepted Answer · 2017-05-23 12:16:48Z

0

You should check out this link. I hope it will answer your question. Javascript multiple image change with button clicks

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Jan 29, 2017 at 17:16

Rifat Bin Reza

2,7813 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R Rodriguez Over a year ago

Thanks but I'd really appreciate it if someone could show me how to embed this or something similar into my above code

user2267175 · Accepted Answer · 2017-01-29 17:29:47Z

Here's a modern solution, note that you don't actually need to use getElementById, as long as the Id is unique across both HTML and Javascript you can just do id.innerHTMl = 'w/e';

var planets = [
  {name:"Mercury", src: "./path/to/Image.png"},
  {name:"Venus", src: "./path/to/Image.png"},
  {name:"Earth", src: "./path/to/Image.png"},
  {name:"Mars", src: "./path/to/Image.png"},
  {name:"Jupiter", src: "./path/to/Image.png"},
  {name:"Saturn", src: "./path/to/Image.png"},
  {name:"Uranus", src: "./path/to/Image.png"},
  {name:"Neptune", src: "./path/to/Image.png"}
];

var endofplanets=planets.length;
var i = -1;

btnPrev.addEventListener('click', previousplanet);
btnNext.addEventListener('click', nextplanet);

function nextplanet(){
i++;
if(i==endofplanets) i=0;

  planetName.innerHTML=planets[i].name;
  planetImage.setAttribute('src', planets[i].src);
}

function previousplanet(){
i--;
if(i<0) i=endofplanets-1;
  planetName.innerHTML=planets[i].name;
  planetImage.setAttribute('src', planets[i].src);
  
}

nextplanet();

<html>
<head>
<body bgcolor="cyan">
<h1>The Solar System</h1>


<p id="planetName"></p>

<img id="planetImage" src=""/>
  
<button id="btnPrev">Previous Planet</button>
<button id="btnNext">Next Planet</button>

</body>
</head>
</html>

Chris Stanley · Accepted Answer · 2017-01-30 14:12:52Z

0

<html>
<head>
<body bgcolor="cyan">
<h1>The Solar System</h1>
<script>
var planets=["Mercury","Venus","Earth","Mars","Jupiter","Saturn","Uranus","Neptune"];
var images=["mars.jpg", "venus.jpg", "earth.jpg", "mars.jpg", "jupiter.jpg", "saturn.jpg", "uranus.jpg", "neptune.jpg"];
var endofplanets=planets.length;
var i =-1;

function nextplanet(){
i=i+1;
if(i==endofplanets){
i=0;
}
document.getElementById('p1').innerHTML=planets[i];
document.getElementById('image').src=images[i];
}
</script>
<script>
function previousplanet(){
i=i-1;
if(i<0){
i=endofplanets-1;}
document.getElementById('p1').innerHTML=planets[i];

}

</script>
<img id="image">
<p id="p1">---</p>
<button type="button" onclick=nextplanet()>Next Planet</button>
<button type="button" onclick=previousplanet()>Previous Planet</button>
</body>
</head>
</html>

Be sure to actually have those images and link to those images. Also, this is VERY basic javascript, so I HIGHLY recommend that you talk to your teacher or study harder, because you'll never make it through your class by coming here for every question.

edited Jan 30, 2017 at 14:12

answered Jan 29, 2017 at 17:19

Chris Stanley

2,9663 gold badges15 silver badges18 bronze badges

2 Comments

R Rodriguez Over a year ago

Thanks for the advice although I've been encouraged to come here by my teacher as this is a computer science research task

R Rodriguez Over a year ago

Also, I'd like to ask will the variable images has been created will it still work if I put links to images (like - nineplanets.org/images/mercury.jpg) I'd like to use instead of images saved on my PC?

Uma Natesh · Accepted Answer · 2017-01-30 16:38:25Z

Just a line added to your code

document.getElementById('image').src ="http://nineplanets.org/images/"+ planets[i] +".jpg"

Inside the loop, it will load the images of the planets

<html>
<body bgcolor="cyan">
<h1>The Solar System</h1>
<script>
var planets= ["mercury","venus","earth","mars","jupiter","saturn","uranus","neptune"];
var endofplanets=planets.length;

var i = -1;

function nextplanet()
{
  i=i+1;

  if(i==endofplanets){
    i=0;
  }

document.getElementById('p1').innerHTML=planets[i];
document.getElementById('image').src ="http://nineplanets.org/images/"+ planets[i] +".jpg"
}

function previousplanet(){

  i=i-1;
  if(i<0){
    i=endofplanets-1;}

  document.getElementById('p1').innerHTML=planets[i];
  document.getElementById('image').src ="http://nineplanets.org/images/"+ planets[i] +".jpg"

}
</script>

<img id="image">
<p id="p1">---</p>
<button type="button" onclick="nextplanet()">Next Planet</button>
<button type="button" onclick="previousplanet()">Previous Planet</button>
</body>
</html>

Collectives™ on Stack Overflow

How do you use a button to change the image using Javascript

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related