どのように私は画像JavaScriptを変更するonclick関数を使用するのですか？

-3

  function up(){ 

      var myShapes= new Array(); 

      myShapes[0]="<img src='et.png' width='150'/>" 
      myShapes[1]="<img src='bulb.png' width='150'/>" 
      myShapes[2]="<img src='raind.png' width='150'/>" 


      var woe=Math.floor(Math.random() * 3); 

      document.write(myShapes[woe]) 

      } 
      up()

私は、画像をクリックするたびに、画像をボタンとしてランダムに別の画像に変えたいと考えています。私はページをリフレッシュするたびに別のイメージが表示されるので、正しいトラック上にあることがわかります。ページがリフレッシュされたときだけでなく、イメージが押されたときにその作業をするのに役立つ必要があります。ありがとうございました！どのように私は画像JavaScriptを変更するonclick関数を使用するのですか？

出典

2016-08-01 altitudeup

のですか？あなたはこれを使用する必要があります： –

AT-2016返信ありがとう私はプログラミングやスタックのオーバーフローに新しいことを教えてくれるようにあなたを送ってきたのを見たことがありませんでした。 – altitudeup

私はすでに例を挙げました。 HTMLタグやHTMLタグを使用しないと、画像をクリックして変更することはできません。 –

1：イメージ配列myShapesは、すべての評価で一定であるため、関数のすべての評価に割り当てる必要はありません。言い換えると、ページロード時にグローバル変数として一度定義し、closureの内部から囲む変数としてアクセスすることができます。

2：むしろ<img>タグの完全なHTMLよりも、myShapesに画像のURLのみを定義した方がよいかもしれません。動的HTMLを記述するのではなく、<img>タグのsrc属性を、選択した配列要素から設定することができます。つまり、onloadハンドラを使用してページのロードが完了した後に関数を呼び出す必要があります。これは、JavaScript関数が実行されるまでに<img>要素が処理されたことを確認するために必要です。これは通常動的コンテンツの生成方法であるため、ページの読み込み中にdocument.write()呼び出しを行うのではなく、これが望ましい方法です。

3：画像をクリックして画像を変更するには、関数を呼び出す画像要素にonclickハンドラを追加する必要があります。 HTMLはどこ

var myShapes = [ 
 
    'https://www.gravatar.com/avatar/e8f9bc86c31c62823171c2c83c249526?s=328&d=identicon&r=PG&f=1', 
 
    'https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=328&d=identicon&r=PG&f=1', 
 
    'https://www.gravatar.com/avatar/fa7fe8a1a8d8f84ef89a80c783bcd9e7?s=328&d=identicon&r=PG&f=1', 
 
]; 
 

 
function setRandomImage() { 
 
    var imgElem = document.getElementById('img1'); 
 
    imgElem.setAttribute('src',myShapes[Math.floor(Math.random()*3)]); 
 
} // end setRandomImage()

<body onload="setRandomImage();"> 
 
    <img id="img1" width="150" onclick="setRandomImage();"/> 
 
</body>

出典

2016-08-01 03:32:52 bgoldst

百万bgoldstありがとうございます！私は本当に本当に感謝しています。 – altitudeup

問題ありません:) – bgoldst

まだ完全なHTMLが 'myShapes'、つまり' 'タグです。 'myShapes'配列は、HTMLではなく画像のURLだけを格納する必要があります。つまり、代入を 'var myShapes = ['et.png'、 'bulb.png'、 'raind.png'];'に変更します。 – bgoldst

どのように私は画像JavaScriptを変更するonclick関数を使用するのですか？

答えて

関連する問題