ボタンを使って画像を変更するにはJavaScriptを使用します

ソーラーシステムの惑星に関するHTMLとJavaScriptを使用してウェブサイトを構築するための学校の割り当てがあります。このウェブサイトは非常に基本的なものですが、私はHTMLとJavaScriptの初心者です。ウェブサイトには、次の惑星または前の惑星という2つのボタンが含まれていなければなりません。ボタンを使って画像を変更するにはJavaScriptを使用します

たとえば、テキストが「Earth」で、ユーザが前の惑星を押した場合、テキストは「Venus」と読み上げられます。

私は上記の基準を満たしていますが、このウェブサイトのおかげで問題はありませんでしたが、次のセクションでは、惑星が画面上に表示されてその画像が変化するどの惑星が見られているのか。ここで

はただのテキストを変更する二つのボタンのための作業コードです：

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

誰でもボタンは、それが大幅にappriciatedされるだろうにも押されたときにイメージを変えるであろうと、このにコードを追加する方法を知っている場合

出典

2017-01-29 R Rodriguez

あなたはこのリンクをチェックアウトする必要があります。私はあなたの質問に答えることを願っています。 Javascript multiple image change with button clicks

出典

2017-01-29 17:16:40

おかげで誰かが、私はこのように私の先生でここに来ることを奨励してきたが、私の上記のコードにアドバイスを –

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

、実際にそれらのイメージにそれらの画像やリンクを持っているようにしてください。また、これは非常に基本的なjavascriptなので、あなたはすべての質問のためにここに来ることで決してあなたのクラスを通してそれをすることはないので、あなたは先生に話すか、もっと勉強することを強くお勧めします。

出典

2017-01-29 17:19:45

おかげでこのまたは類似した何かを埋め込む方法私を見ることができれば、私はそれを本当に感謝しますコンピュータサイエンスの研究課題です –

また、可変画像が作成されているかどうかを質問したいと思います。画像にリンクを張っても機能しますか（http://nineplanets.org/images/mercury.jpg）私のPCに保存された画像の代わりに使用したいのですか？ –

はい。それは動作します。 –

idとinnerHTMl = 'w/e'の両方でHTMLとJavaScriptの両方で一意のIDであれば、実際にgetElementByIdを使用する必要はありません。

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>

出典

2017-01-29 17:29:47 user2267175

ジャストラインは、[のdocument.getElementById（ 'イメージ'）。SRC = "http://nineplanets.org/images/" +惑星コードに

を追加しましたi]が+ "JPG" ループ内

は、それが惑星の画像をロードします

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

出典

2017-01-30 16:38:25 Uma

ボタンを使って画像を変更するにはJavaScriptを使用します

答えて

関連する問題