Nie używaj atrybutów on*
. Zamiast tego używaj addEventListener
.
Dlaczego nie zapakujesz twoich ścieżek do jakiegoś obiektu?
JSFiddle
const carImages = {
audi: [
'img/audi/1',
'img/audi/2',
'img/audi/smieszne_audi'
],
bmw: [
'img/bmw/1',
'bmw/2016/2',
'img/bmw/smieszne_bmw'
]
};
// W ES6 dostępne są funkcje zwane generatorami
// Zachęcam do poczytania, bo super ficzer
// Ta funkcja robi dokładnie to samo, co twój kodzik:
// var i = 0;
// if(i<=4)
// i++;
// else
// i=1;
const carImagesGenerator = function* (brand) {
let i = 0;
while(true) {
yield carImages[brand][i];
i = i === carImages[brand].length - 1 ? 0 : i + 1;
}
};
// pobieramy wszystie buttony
// querySelectorAll akceptuje jako parametr selektory CSSowe
// wiec oczwiście mozesz to dowolnie zmienić, np. jakąś klasę
const buttons = document.querySelectorAll('[type=button]');
// iterujemy po wszystkich znalezionych buttonach, żeby dodać
// do nich handler zdarzenia click
buttons.forEach(button => {
// tworzymy nasz generator obrazków, w zależności od marki jaką trzyma guzik
// button.value to będzie w Twoim przypadku audi lub bmw
const generator = carImagesGenerator(button.value);
button.addEventListener('click', () => {
// wywołując generator.next() dostaniemy
// kolejne ścieżki do obrazków
// a jak dojedziemy do końca tablicy to lecimy od początku :)
const {value} = generator.next();
// tutaj możesz dodać logikę dodawania obrazka gdzie tam chcesz
console.log(value);
});
});
Zachowując Twój obecny kod możesz go przerobić tak:
const carImages = {
audi: [
'img/audi/1',
'img/audi/2',
'img/audi/smieszne_audi'
],
bmw: [
'img/bmw/1',
'bmw/2016/2',
'img/bmw/smieszne_bmw'
]
};
var i=1;
function getCar(where){
var x = document.createElement("IMG");
// tutaj zmiana
x.setAttribute("src", carImages[where][i]);
x.setAttribute("width", "200");
x.setAttribute("width", "150");
photos.appendChild(x);
if(i<=4)
i++;
else
i=1;
}