JavaScriptを使用して画像をサイクリング

ボタンをクリックしたときに2番目の画像が表示されないのはなぜですか？これは、antイメージを表示するelseステートメントにまっすぐ進みます。JavaScriptを使用して画像をサイクリング

<!DOCTYPE html> 
<html> 
    <body> 
     <script> 
      function changeImg() { 
       if (document.getElementById("cycle").src == "fox.jpg") { 
        document.getElementById("cycle").src = "hawk.jpg"; 
       } else { 
        document.getElementById("cycle").src = "ant.jpg"; 
       } 
      } 
     </script> 

     <button onclick = "changeImg()">change image</button> 
     <img id ="cycle" src ="fox.jpg"/> 
    </body> 
</html>

出典

2017-11-17 user8586052

とあなたの要素 'VARサイクル=のdocument.getElementById（「サイクル」）をキャッシュし;'その後、あなただけ行うことができますが毎回 'document.getElementById'の代わりに' cycle.src'を使います。 –

ここでは、javascriptをデバッグする際のレッスンです： 'console.log'を使用してください。私はあなたにあなたのコードを組み立ててもらいましたが、 '.src'のログ文を追加しました。 https://jsfiddle.net/z9dojguu/コンソールを開きます。ログに記録されているsrcと何をチェックしているのかを確認します。 –

ifは、どのイメージがあるのかわからないため、 'else'に行きます。したがって、 'if'は実際に何もしていません。 – Ady96

DOMのいずれかにアクセスする前にDOMがレンダリングされていることを確認するには、本文の末尾にスクリプトタグを追加してください。（私の例のように）あなたのコードの問題は、あなたが追加するすべての新しい画像に対して新しいifを追加する必要があるということです。あなたが気づいたように、理解してデバッグすることは難しくなります。サイクリングのようなものは、配列を使用し、その配列のインデックスに対してモジュロ演算を使用します。

このソリューションでは、コード/ロジックに触れることなく、イメージアレイに好きなだけ多くの画像を追加できます。

<!DOCTYPE html> 
<html> 
<body> 
    <button onclick="changeImg()">change image</button> 
    <img id="cycle" /> 

    <script> 
    var imageElement = document.getElementById("cycle"); 
    var images = ["fox.jpg", "hawk.jpg", "ant.jpg"]; // add as many images as you want 
    var counter = 0; 
    imageElement.src = images[counter] // set the initial image 

    function changeImg() { 
     counter = (counter + 1) % images.length;  
     imageElement.src = images[counter]; 
    } 
    </script> 
</body> 
</html>

出典

2017-11-17 21:30:12 Daniel

この度はありがとうございます。しかし、関数が最後の画像の後の最初の画像にどのようにループバックするかを説明できますか？ – user8586052

彼は剰余演算子を使用しています。 changeImg関数が実行されるたびに、1ずつインクリメントされます。0から始まり、1に、2に3、そして... oopsになります。配列には3つの項目しかありません。だから、カウンターを配列の長さで割って（3）残りの部分をとり、そのインデックスにTHATを使ってください。カウンタが3のときは3で割って残りを0とし、カウンタを0に戻します。 – Will

-1

属性の実際の内容にアクセスする場合は、getAttribute('src')を使用してください。それ以外の場合は、解決されたURLを取得します。（例：https://example.loc/example/fox.jpg）

var cycle = document.getElementById("cycle"); 
if (cycle.getAttribute('src') == "fox.jpg") { 
    cycle.src = "hawk.jpg"; 
} else { 
    cycle.src = "ant.jpg"; 
}

出典

2017-11-17 21:35:01

申し訳ありませんが、間違えてクリックしてしまいました。投稿者を編集してください。 –

document.getElementById("cycle").srcは常に画像の完全なURLを持っており、これはfox.jpgから類似していません。あなたが cycle.getAttribute('src')

例のコードを使用し、別のsolution.Tryを試す必要があります。自分で入力して保存

function changeImg() { 
      let cycle = document.getElementById("cycle"); 
       console.log(cycle.src,cycle.getAttribute('src')); // show real value and taribute  
      if (cycle.getAttribute('src') == "fox.jpg") { 
       cycle.src = "hawk.jpg"; 
      } else {cycle.src = "ant.jpg"; 
      } 
     }

出典

2017-11-17 21:57:57

JavaScriptを使用して画像をサイクリング

答えて

関連する問題