Как правильно сделать кнопку переключения фонов?

Question

Объясните, как правильно сделать кнопку переключения фонов, пробовал таким кодом менять картинки, а тут не совсем понимаю, что писать

let phrases = [
  {
    background.style.backgroundImage = "url('https://million-wallpapers.ru/wallpapers/0/66/520178456323425/fentezi-vodopad.jpg')"
  },
  {
    background.style.backgroundImage = "url('https://img3.goodfon.ru/original/2560x1440/8/41/gory-gornaya-reka-les-nebo.jpg')"
  },
];

function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

let button = document.querySelector('.button');
let phrase = document.querySelector('.phrase');
let image = document.querySelector('.background');

button.addEventListener('click', function() {
  let randomElement = getRandomElement(phrases);
  background.src = randomElement.background.style.backgroundImage;
});

.background {
  background-image: url(https://img1.goodfon.ru/original/2100x1225/5/b9/beautiful-blue-planety.jpg);
}

<div class="background" ;>

Answer 1

Очень непонятный код. Очень много ошибок. Я накидал решение. Изучи разницу. Зачем в массиве был объект мне непонятно, в обработчике какая-то дичь происходит. Я не разобрался, что ты хотел сделать. В общем, вот, посмотри. Если что, спрашивай.

let phrases = [ 
  "url('https://million-wallpapers.ru/wallpapers/0/66/520178456323425/fentezi-vodopad.jpg')",
  "url('https://img3.goodfon.ru/original/2560x1440/8/41/gory-gornaya-reka-les-nebo.jpg')"
];

let button = document.querySelector('.button');
let divBg = document.querySelector('.background');
    
function getRandomElement(arr) {
  let randIndex = Math.floor(Math.random() * arr.length);
  return arr[randIndex];
}

button.addEventListener('click', function () {
  let randomElement = getRandomElement(phrases);
  divBg.style.backgroundImage = randomElement;
});

.background {
  height: 150px;
  width: 100%;
  background-image: url(https://img1.goodfon.ru/original/2100x1225/5/b9/beautiful-blue-planety.jpg);
}

<div class="background">
  
</div>
<input class="button" type="button" value="Change background"/>

Answer 2

randomElement.background.style.backgroundImage; чтобы вот так доставать значение из объекта, структура должна быть такой:

let randomElement = {
  background: {
    style: {
      backgroundImage: "url('TEST.jpg')"
    },
  },
};

console.log(randomElement.background.style.backgroundImage);

Конечно, нет смысла создавать такую вложенность. А у блока нет свойства .src, нужно как-раз менять его .style.backgroundImage:

let images = [
  "https://million-wallpapers.ru/wallpapers/0/66/520178456323425/fentezi-vodopad.jpg",
  "https://img3.goodfon.ru/original/2560x1440/8/41/gory-gornaya-reka-les-nebo.jpg",
];

let button = document.querySelector('.button');
let div = document.querySelector('.background');

let last_img = null;
button.addEventListener('click', function() {
  let img = randElem(images);
  if (images.length > 1) while (img === last_img) img = randElem(images);
  // Если картинок больше 1, пока выбранная картинка равна предыдущей - выбрать другую.

  last_img = img; // Новый img записывается в last_img для сравнения в следующий раз.
  
  div.style.backgroundImage = "url('" + img + "')";
});

function randElem(arr) {
  return arr[ Math.floor(Math.random() * arr.length) ];
}

.background {
  background-image: url(https://img1.goodfon.ru/original/2100x1225/5/b9/beautiful-blue-planety.jpg);
  width: 200px;
  height: 200px;
  background-size: 200px 200px;
}

<button class="button">test</button>
<div class="background"></div>

БЛОГ НА HUSL

Как правильно сделать кнопку переключения фонов?

Ответы (2 шт):