如何使用Javascript使用按钮更改图像_Javascript_Html_Image_Button

如何使用Javascript使用按钮更改图像

javascript html image button

如何使用Javascript使用按钮更改图像,javascript,html,image,button,Javascript,Html,Image,Button,我有一个学校作业，要用HTML和JavaScript建立一个关于太阳系行星的网站。该网站只是非常基本的，但我是一个HTML和JavaScript的初学者。该网站必须包含两个名为“下一个行星”和“上一个行星”的按钮，用于将屏幕上的文本更改为“下一个行星”或“上一个行星” 例如，如果文本为“地球”，用户按下前一颗行星，则文本将为“金星” 我有上面的标准，没有问题，（感谢这个网站），但是任务的下一部分是当行星出现在屏幕上时，该行星的图片会根据显示的行星而改变以下是仅更改文本的两个按钮的工作代码： &

我有一个学校作业，要用HTML和JavaScript建立一个关于太阳系行星的网站。该网站只是非常基本的，但我是一个HTML和JavaScript的初学者。该网站必须包含两个名为“下一个行星”和“上一个行星”的按钮，用于将屏幕上的文本更改为“下一个行星”或“上一个行星”

例如，如果文本为“地球”，用户按下前一颗行星，则文本将为“金星”

我有上面的标准，没有问题，（感谢这个网站），但是任务的下一部分是当行星出现在屏幕上时，该行星的图片会根据显示的行星而改变

以下是仅更改文本的两个按钮的工作代码：

<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>


太阳系
var行星=[“水星”、“金星”、“地球”、“火星”、“木星”、“土星”、“天王星”、“海王星”]；
var endofplanets=行星长度；
var i=-1；
函数nextplanet（）{
i=i+1；
如果（i==endofplanets）{
i=0；
}
document.getElementById（'p1'）.innerHTML=planets[i]
}
函数previousplanet（）{
i=i-1；
如果（i你应该查看这个链接。我希望它能回答你的问题。

太阳系
var行星=[“水星”、“金星”、“地球”、“火星”、“木星”、“土星”、“天王星”、“海王星”]；
var图像=[“mars.jpg”、“venus.jpg”、“earth.jpg”、“mars.jpg”、“jupiter.jpg”、“saturn.jpg”、“uranus.jpg”、“neptune.jpg”]；
var endofplanets=行星长度；
var i=-1；
函数nextplanet（）{
i=i+1；
如果（i==endofplanets）{
i=0；
}
document.getElementById（'p1'）.innerHTML=plants[i]；
document.getElementById（'image'）.src=images[i]；
}
函数previousplanet（）{
i=i-1；
如果（i这是一个现代的解决方案，
注意，您实际上不需要使用getElementById，只要Id在HTML和Javascript中都是唯一的，您就可以执行Id.innerHTMl='w/e'

var=[
{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:“天王星”，src:“./path/to/Image.png”}，
{名称：“海王星”，src:“./path/to/Image.png”}
];
var endofplanets=行星长度；
var i=-1；
btnPrev.addEventListener（“单击”，前一个星球）；
btnNext.addEventListener（'click'，nextplanet）；
函数nextplanet（）{
i++；
如果（i==endofplanets）i=0；
planetName.innerHTML=planets[i].name；
planetImage.setAttribute（'src'，planets[i].src）；
}
函数previousplanet（）{
我--；
如果（i只是在代码中添加了一行
document.getElementById（'image'）.src=”http://nineplanets.org/images/“+行星[i]+”.jpg”
在环内，它将加载行星的图像


太阳系
var行星=[“水星”、“金星”、“地球”、“火星”、“木星”、“土星”、“天王星”、“海王星”]；
var endofplanets=行星长度；
var i=-1；
函数nextplanet（）
{
i=i+1；
如果（i==endofplanets）{
i=0；
}
document.getElementById（'p1'）.innerHTML=plants[i]；
document.getElementById（'image'）.src=”http://nineplanets.org/images/“+行星[i]+”.jpg”
}
函数previousplanet（）{
i=i-1；
如果（我很高兴，但如果有人能告诉我如何将这个或类似的东西嵌入到我的上述代码中，我会非常感激。谢谢你的建议。虽然我的老师鼓励我来这里，因为这是一项计算机科学研究任务。同样，我想问一下，是否已经创建了可变图像。如果我将图像链接到图像中，它是否仍然有效（像-）我想用它来代替保存在电脑上的图像？
<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>