Как использовать функцию многократно

Question

Дан блок div. Внутри блока - изображение под номером 1. При клике правой кнопкой мыши, меняется изображение под номером 2.

const div = document.querySelector(".div-1").oncontextmenu = f1;
let img = document.querySelector('.img');

function f1() {
  img.src = "https://i.pinimg.com/750x/80/64/3d/80643d2bd195efcb740e340441a4dfd6.jpg";
  return false;
}

<div class="div-1">
  <img class="img" src="https://i.pinimg.com/564x/a9/3c/b4/a93cb4e0316ef9c4db83846550ff4deb.jpg" alt="">
</div>

Мне нужно, чтобы картинка менялась столько раз, сколько я захочу, а не один раз.

Answer 1

При клике на картинку правой кнопкой мыши сменяется картинка, контекстное меню не показывается при помощи e.preventDefault()
Текущая картинка > в атрибуте src
Следующая > в атрибуте data-img-src

const img = document.querySelector('.img');

function contextMenuOnImage(e) {
  e.preventDefault();
  const target = e.target;
  if (target.nodeName !== 'IMG') {
    return false;
  }
  const dataImgSrc = target.getAttribute('data-img-src');
  const currentSrc = target.src;
  target.src = dataImgSrc;
  target.setAttribute('data-img-src', currentSrc);
}

img.addEventListener('contextmenu', contextMenuOnImage);

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
}

<div class="div-1">
  <img class="img" src="https://picsum.photos/200/" data-img-src="https://picsum.photos/300/">
</div>

БЛОГ НА HUSL

Как использовать функцию многократно

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