0

При клике на картинку на ее месте должна быть другая картинка, а при повторном клике опять другая. Но так как изображения 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";
  }
}
5
  • а что в отладчике? Commented 12 мар. 2020 в 12:59
  • Имеете ввиду в консоле? Ничего, все правильно работает. Значение <img src =" "> меняется на то что в скрипте прописано. Но вся проблема в том что когда снова кликаю по уже новой картинке и по идее функция должна повторно вызываться и сравнивать значения, и потом менять его на другое этого не происходит. И я не понимаю почему? Commented 12 мар. 2020 в 13:08
  • нет, я имел в виду именно отладчик, debugger, f12 в хроме,в нем можно узнать детали пошагового выполения скрипта Commented 12 мар. 2020 в 13:45
  • Только от вас узнал о его существовании XD Сорри. Мне аж стыдно от своей тупости. Но я уже нашел ответ на вопрос. Использовал подсказку от Denis'а. Вот только не знаю как оформить здесь готовое решение. В комменты кидать не положено вроде, а добавлять в P.S не хочется так как пост гигантский будет. Commented 12 мар. 2020 в 13:51
  • ничего страшного, пользуйтесь наздоровье, очень помогает! Про ответ - добавьте ответ на свой же вопрос, если угодно, это тут нормальная практика Commented 12 мар. 2020 в 13:53

4 ответа 4

7

При получении 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>

0
1

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

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";
    }
}
0

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

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 да я знаю что не хорошо списывать стайл внутр элемента, но вдруг кому-нибудь понадобится.

0

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


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

Ссылка на codepen / jsfiddle


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

Ссылка на codepen / jsfiddle


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

empty

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.