Изменить изображение по клику с помощью JavaScript - PullRequest
Новая
       0

Изменить изображение по клику с помощью JavaScript

0 голосов
/ 23 октября 2018

Вот моя проблема:

Я новичок в Javascript и пытаюсь изменить свое изображение при клике.

Это простая контр-игра, которая выполняет 2-кадровую анимацию удара squidward.мазок.

Пока что у меня есть счетчик, но я не могу изменить изображение при нажатии.Кроме того, он должен будет вернуться к исходному изображению, чтобы его можно было снова щелкнуть и сосчитать.

  <html lang="en">
 <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
 <body>
<div class="container">

        <button onclick="dabMan()"><img src="./squid-dab1.gif"> . 
        </button>
        <br><br>
        How many dabs??
        <input type="text" id="text">

</div>


<script src="./script.js"></script>


  </body>
 </html>

var dabcount = 0;

function dabMan() {
dabcount = dabcount + 1
document.getElementById('text').value = dabcount;
console.log("dabMan", dabMan)

document.getElementById("./squid-dab1.gif") .src = "./squid-dab2.gif";
console.log("changeimage", dabMan)
 }

1 Ответ

0 голосов
/ 23 октября 2018

вместо использования атрибута "onclick () {}" в html, напишите прослушиватель событий в js.Предполагая, что ваш тег изображения выглядит следующим образом: 

<img src='./squid-dab1.gif' id='myImage'>

Примечание: Javascript должен знать, как найти ваше изображение ... Следовательно, идентификатор

Ваш код JavaScript долженвыглядеть следующим образом: 

<script>
    var image = document.getElementById('myImage');

    image.addEventListener('click', function(){
        changeImage();
    });

    function changeImage(){
        image.src = './squid-dab2.gif';
    }
</script>

Это сделает так, что при нажатии на изображение оно изменится.Если вы хотите, чтобы кнопка делала это, просто создайте кнопку с идентификатором «myImage», например, так: 

<button id='myImage'>Click me to change the picture</button>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...