Как при onClick бесконечно подменять картинку?

Question

При клике на картинку на ее месте должна быть другая картинка, а при повторном клике опять другая. Но так как изображения 2, то они просто напросто должны сменять друг друга.

И оно меняет, но только лишь один раз, но ведь при повторном нажатии я снова вызываю эту функцию, и она должна проверять условия, а оно не работает.

Или я не понимаю суть работы onClick, и оно один раз только подменяет, а для прохождения проверки нужна перезагрузка страницы (но если перезагрузить страницу оно все восстановится это понятно)

HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Монализа</title>
   <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
   <img src="./img/game_1/zeroblur.jpg" id="mona" onclick="game()">
   <script type="text/javascript" src="./js/js_2.js"></script>
</body>
</html>

JS:

function game(){
  var image = document.getElementById('mona');
  if(image.src == "./img/game_1/zero.jpg") {
    image.src = "./img/game_1/zeroblur.jpg";
  } else {
    image.src = "./img/game_1/zero.jpg";
  }
}

Answer 1

При получении src файла, Вы будет получать полный его путь, к примеру, http:/localhost/img/214.png.
Чтобы сравнивать картинки, Вы можете либо использовать получение корневой директории и подставлять её в сравнение, либо обрабатывать src получая только название файла, без полного пути.
Пример:

    function game(){
        var image = document.getElementById('mona');
        console.log(image.src);
        let src = image.src.split('/');
        let src1 = src.pop();
        if(src1 == "image2.png") {
            console.log('123');
            image.src = "./img/image4.png";
        } else {
            console.log('321');
            image.src = "./img/image2.png";
        }
    }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Монализа</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<img src="./img/image2.png" id="mona" onclick="game()">123
<script type="text/javascript" src="./js/js_2.js"></script>
</body>
</html>

Answer 2

Решение проблемы. Получить элемент по айди, разбить его на части разделяющиеся слэшем, взять последнюю часть( непосредственно название картинки и ее формат), и провести проверку "по названию"

function game(){
    debugger;
    var image = document.getElementById('mona');
    src_1 = image.src.split('/');
    src = src_1.pop();
    if (src == "zeroblur.jpg"){
        image.src = "./img/game_1/zero.jpg";
    } else  {
        image.src = "./img/game_1/zeroblur.jpg";
    }
}

Answer 3

Придумал новое решение. Получаем элемент,присваиваем ему событие, и записываем в него стайл.

var image = document.getElementById("mona"); // элемент с id "mona"
image.addEventListener("click", blur); //  присваиваем этому элементу событие

function blur(){
   // debugger;
   if (image.style.filter == "blur(10px)"){ // изначально такого значения у парамерта style не будет
       image.style.filter = "blur(0px)"; 
   }else{
       image.style = "filter:blur(10px)";
   }
}

Изначально при первом проходе такого значения у параметра стайл не будет. поэтому присвоится значение blur(10px), при втором нажатии такое значение уже будет, и оно будет перезаписано.

P.S да я знаю что не хорошо списывать стайл внутр элемента, но вдруг кому-нибудь понадобится.

Answer 4

Оставлю свой вариант решения вопроса с помощью изменения стиля для объекта.

Если я правильно понял вопрос, то решение будет от меня следующим:

Ссылка на codepen / jsfiddle

Вариант решения с массивом ссылок на картинки:

Ссылка на codepen / jsfiddle

(пытался вставить код здесь и получил ошибку, поэтому оставлю код ссылкой).

empty

БЛОГ НА HUSL

Как при onClick бесконечно подменять картинку?

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