setInterval（）不适用于HTML中的src链接图像

Question

New coder - 1st question here. I'm doing first free code camp project, but question is about a unrequired flourish I just want to add and learn about, it's not needed for project. I want the album covers I've linked in HTML to change every x seconds. But nothing happens yet. Images just stay static. Thanks

    <h2> Discography </h2>
<div class="row">
  <div id="album" class="col-lg-8">
    <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div>
    <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div>
    <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div>
    <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div>
    <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div>
    <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div>
    <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div>
  </div>

and the javascript code

    //Change album cover after 5 seconds - continous loop//
var Discography = document.getElementById("album");
var disc = ["album 0", "album 1", "album 2", "album 3", "album 4", "album 5", "album 6"];
var counter = 0;

function changeDisc() {
  if (counter >= disc.length) {
    counter = 0;
  }
  Discography.setAttribute =disc[counter];
  counter++;

}

var myCounter = setInterval(changeDisc, 6000);

Discography.onClick = function() {

  clearInterval(Disography);

  Discography.innerHTML = "Counter stopped";

};

Answer 1

You aren't actually setting the attribute. You are actually removing the setAttribute method and replacing it with the url. I think you want this:

function changeDisc() {
  if (counter >= disc.length) {
    counter = 0;
  }
  Discography.setAttribute('src', disc[counter]);
  counter++;

}

Answer 2

I managed to get your code working. I don't know if this is what you wanted, but I hope it helped you.

Assign Attributes

Discography.setAttribute = disc[counter];

Should be

Discography.setAttribute("src", discs[counter]);

Bind EventHandlers

Discography.onClick = function() {

Should be

Discography.addEventListener("click", function () {

Wrong Element

You tried to assign the src attribute to the <div id="album" class="col-lg-8"> which is a div and it does not have that attribute.

To fix this I added all possible album images to a Array and this will be assigned to a single <img /> to get this working.

Note that I modified some naming conventions, which I do prefer.

My Solution

 var discs = [ "https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg", "https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg", "https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg", "https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg", "https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg", "https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" , "https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg", ]; var counter = 0; var discography = document.getElementById("album"); function moveToNextDisc() { if (counter >= discs.length) { counter = 0; } discography.setAttribute("src", discs[counter]); counter++; } var interval = setInterval(moveToNextDisc, 1000); discography.addEventListener("click", function () { clearInterval(interval); discography.innerHTML = "Counter stopped"; }); 

 <h2>Discography</h2> <div class="row"> <div class="col-lg-8"> <div class="albums"> <span> <img id="album" alt="1994" class="img-responsive"> </span> </div> </div> </div> 

Answer 3

for learning purpose, you are developing a component that:

1. changes cover every track change
2. stops when the user pauses

Javascript should be used for business logic and html/css as a view reflection of the state of the component.

So we need for an Object which has at least three methods :

• public play starts the player
• public pause pauses the player
• private _loop iterates through the tracks

and for a Controller which controls the html view .

 function Player(element, interval) { this.element = element; this.tracks = element.querySelectorAll('.albums'); this.currentTrack = null; this.isPlaying = false; this._timeout = null; this.interval = Number(interval) || 2000; } Player.prototype.pause = function() { window.clearTimeout(this._timeout); this.isPlaying = false; return this; }; Player.prototype.play = function() { this.isPlaying = true; return this._loop(); }; Player.prototype._loop = function() { var self = this; self._timeout = window.setTimeout(function() { var track; if(self.currentTrack) { track = self.currentTrack.nextElementSibling; self.currentTrack.style.opacity = 0; } if(!track) { track = self.tracks[0]; } track.style.opacity = 1; self.currentTrack = track; return self._loop(); }, self.interval); return this; } /** VIEW CTRL **/ function PlayerCtrl() { var element = document.querySelector('#album'); var player = new Player(element, 3000); var play = document.querySelector('#Play'); var pause = document.querySelector('#Pause'); play.onclick = function() { return player.isPlaying || player.play(); }; pause.onclick = function() { return player.isPlaying && player.pause(); }; player.play(); } document.addEventListener('DOMContentLoaded', PlayerCtrl); 

 #album { width: 300px; height: 300px; margin: 10px auto; overflow: hidden; background: lightcoral; position: relative; border: 3px dotted #333; } .albums { transition: 450ms opacity linear; opacity: 0; position: absolute; top: 0; left: 0; } .albums img { max-width: 100%; } 

 <button id="Play">Play</button> <button id="Pause">Pause</button> <hr /> <h2> Discography </h2> <div class="row"> <div id="album" class="col-lg-8"> <div class="albums" id="album 0"> <span><img src="https://upload.wikimedia.org/wikipedia/en/b/b6/Elliottsmithromancandle.jpeg" alt="1994" class="img-responsive"></span></div> <div class="albums" id="album 1"> <span><img src="https://upload.wikimedia.org/wikipedia/en/e/e3/Elliott_Smith_%28album%29.jpg" alt="1995" class="img-responsive"></span></div> <div class="albums" id="album 2"> <span><img src="https://upload.wikimedia.org/wikipedia/en/f/fd/Elliottsmitheitheror55.jpg" alt="1997" class="img-responsive"></span></div> <div class="albums" id="album 3"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/…albumcover.jpg/330px-ElliottsmithXOalbumcover.jpg" alt="1998" class="img-responsive"></span></div> <div class="albums" id="album 4"> <span><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/…_cover.jpg/330px-Elliott_smith_figure_8_cover.jpg" alt="2000" class="img-responsive"></span></div> <div class="albums" id="album 5"> <span><img src="https://upload.wikimedia.org/wikipedia/en/8/8c/Elliott_smith_from_a_basement_on_the_hill_cover.jpg" alt="2004" class="img-responsive"></span></div> <div class="albums" id="album 6"> <span><img src="https://upload.wikimedia.org/wikipedia/en/4/4e/New_Moon_%28Elliott_Smith_album%29_cover.jpg" alt="2007" class="img-responsive"></span></div> </div>