Slajder js problem

Question

Oops niestety zalozylem nowy temat przez przypadek a chcialem tylko odpowiedziec w poprzednim.

Wielkie dzieki za odpowiedz, sporo mi pomogles. Ale jest jeszcze jeden problem, teraz przyciski dzialaja i w konsoli obrazki sie zmieniaja, ale tylko jako tekst w konsoli. Na stronie jest ciagle ten sam obrazek. Moze moglbys jeszcze na to spojrzec? Bardzo dziekuje za pomoc. 

 

var leftA = document.querySelector("#leftA");
console.log(leftA);
var rightA = document.querySelector("#rightA");
console.log(rightA);

var images = ["blackchair","orangechair","redchair"];
console.log(images);
var imageNumber = 0;
var imageLength = images.length -1;

function changeImage(x){
  imageNumber += x;
  if(imageNumber > imageLength){
    imageNumber = 0;
  }
  if (imageNumber < 0){
    imageNumber = imageLength;
  }
  document.querySelector(".blackchair").src = images[imageNumber];
  document.querySelector(".orange").src = images[imageNumber];
  document.querySelector(".red").src = images[imageNumber];
  console.log(images[imageNumber]);

}

leftA.addEventListener("click", function(){
    changeImage(-1);
});

rightA.addEventListener("click", function(){
    changeImage(1);
});

 

Answer 1

Bo jasno zaznaczyłeś typ danych - String.

var images = ["blackchair","orangechair","redchair"];

console.log(images)

Spróbuj z Image.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image

Wyskoczy ci coś innego :).

No dobra wrzucasz mu Stringa, wywołuje się funkcja przeglądarka reaguje na zdarzenie... i co ma począć "blackchair"? Zapomniałeś mu podać typ Pilku (png,jpg,itd...).

 

 

 

Comments

Dzieki za odpowiedz. Pierwszy raz robie slajder. Jest juz lepiej ale dalej mam jakis problem z tym. 

W html to powinno wygladac tak?

<section> 

    <div class="blackchair"> </div>
    <div class="orange"> </div>
    <div class="red"> </div>

</section>

Klasy maja ustawione obrazek jako background-image. 

Probowalem ustawic var images jako .png ale wtedy nie dziala. Na chwile obecna w konsoli obrazki sie zmieniaja ale na stronie nic sie nie dzieje. 

Kod JS: 

var leftA = document.querySelector("#leftA");
console.log(leftA);
var rightA = document.querySelector("#rightA");
console.log(rightA);

var blackchair = new Image(350,400);
blackchair.src = "../sit final/images/black_chair.png";
var orangechair = new Image(350,400);
orangechair.src = "../sit final/images/orange.png";
var redchair = new Image(350,400);
redchair.src = "../sit final/images/red_chair.png";

var images = [blackchair,orangechair,redchair];

var imageNumber = 0;
var imageLength = images.length -1;

function changeImage(x){
  imageNumber += x;
  if(imageNumber > imageLength){
    imageNumber = 0;
  }
  if (imageNumber < 0){
    imageNumber = imageLength;
  }
  document.querySelector(".blackchair").src = images[imageNumber];
  document.querySelector(".orange").src = images[imageNumber];
  document.querySelector(".red").src = images[imageNumber];
  console.log(images[imageNumber]);

}

leftA.addEventListener("click", function(){
    changeImage(-1);
});

rightA.addEventListener("click", function(){
    changeImage(1);
});

 

---

Zostaw jeden div.

 document.querySelector(".blackchair").src

Tym wywołujesz selektor, a nie klasę CSS . Do klasy CSS służy HTMLElement.style. i tu twoje style (ale rób to w ostateczności) lub lepsze HTMLElement.classList.

Po drugie Image jest obiektem! I jest parsowany jako DOM (dla potwierdzenia moich słów próbuj mu nadać id). Jeżeli chcesz to zrobić to musisz wstrzyknąć w HTML. (AppendChild). Dwa przechowuj je w jakieś tablicy.