CODEWITHSUNDEEP
html
odip
odip

Reputation: 39

How to make the image swap every second

This code will turn the bulb on/off but i want to make the lightbulbs keeps flashing. I've tried different methods and nothing works

<!DOCTYPE html>
<html>

<body>

  <img id="bulb" onclick="switch()" src="off.png" width="100" height="180">

  <p>On/Off</p>

  <script>
    function
    switch () {
      var image = document.getElementById('Bulb');
      if (image.src.match("on")) {
        image.src = "off.png";
      } else {
        image.src = "on.png";
      }
    }
  </script>

</body>

</html>

Upvotes: 1

Views: 341

Answers (4)

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

You should know about js event and js reserve keyword and be sure to use good code editor so that you can see your error. I see you trying to keep flashing but you used onclick event that is clickable it will not flashing.

here is the code below, which you want,

<!DOCTYPE html>
<html>

<body>

  <img id="bulb" src="off.jpg" width="100" height="180">

  <p>On/Off</p>

  <script>
    var myImage = document.querySelector('#bulb');

    var update = setInterval(myUpdate, 1000);

    function myUpdate() {
      setTimeout(() => {
        if (myImage.src.match('off.jpg')) {
          myImage.src = 'on.jpg'
        } else {
          myImage.src = 'off.jpg'

        }
      }, 500)
    }
  </script>

</body>

</html>

or you can use onclick event, when you click than it will start flashing

here is the code below

<!DOCTYPE html>
<html>

<body>

  <img id="bulb" onclick="mySwitch(this)" src="off.jpg" width="100" height="180">

  <p>On/Off</p>

  <script>
    function mySwitch(myImage) {

      var update = setInterval(myUpdate, 500);

      function myUpdate() {
        setTimeout(() => {
          if (myImage.src.match('off.jpg')) {
            myImage.src = 'on.JPG'
          } else {
            myImage.src = 'off.jpg'

          }
        }, 100)
        console.log(myImage)
      }
    }
  </script>

</body>

</html>

Upvotes: 0

Abdelmonaem Shahat
Abdelmonaem Shahat

Reputation: 544

in my opinion, don't use setInterval but u can use a CSS animation rather than it.

Upvotes: 1

Brad
Brad

Reputation: 8668

Here is an example, using setInterval(). I have swapped the image to a div thats background changes color, but same principal applies.

I think its also worth pointing out that you could also do this with a css animation and then just use javascript to toggle the class onto the element. But assuming you just wanna stick to JS for now:

let flashInterval = null;
let flashSpeed = 100;
let bulb = document.getElementById('bulb');


function toggleBulb() {
  if (bulb.classList.contains('on')) {
    bulb.classList.remove('on');
  } else {
    bulb.classList.add('on');
  }
}


function flashBulb() {
  if (flashInterval === null) {
    flashInterval = setInterval(() => {
      toggleBulb();
    }, flashSpeed);
  } else {
    clearInterval(flashInterval);
    flashInterval = null;
  }
}

document.getElementById('toggleBlub').addEventListener('click', toggleBulb);

document.getElementById('toggleFlash').addEventListener('click', flashBulb);
#bulb {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: transparent:
}

.on {
  background: #fcba03;
}
<div id="bulb" class=""></div>

<br>

<button id="toggleBlub">Bulb On/Off</button>

<br><br>

<button id="toggleFlash">Flash On/Off</button>

Upvotes: 2

Nico Shultz
Nico Shultz

Reputation: 1872

I changed your function name to switchBulb because switch is reserved

  var intervalID = window.setInterval(switchBulb, 1000);
  function switchBulb() {
    var image = document.getElementById('bulb');
    if (image.src.match("on")) {
      image.src = "off.png";
    } else {
      image.src = "on.png";
    }
  }

Upvotes: 0

Related Questions