Change Image Onclick for a Set Amount of Time

Change image onClick for a set amount of time

you can use setTimeout(), make a function to reset image src, and use a timeout to call this function after 1s. Also to hide an element use .style.visibility = "hidden"

var counter = 0;function resetImage(){     document.getElementById("face").src = "https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png";     if(counter ===3)       document.getElementById('face').style.visibility = "hidden";}
function myTimer() {counter++;        if (counter === 3 )  {//Image should be hidden in 1 secound document.getElementById("face").src = "https://i.pinimg.com/originals/e0/9b/0b/e09b0b3e287e7ed9c5b2a802e4e31f92.png ";  }else{     document.getElementById("face").src = "http://i0.kym-cdn.com/photos/images/newsfeed/000/295/544/a63.png";  }  setTimeout(function(){     resetImage();  }, 1000) }

<img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png" id="face" onclick="setTimeout(myTimer, 1000);" style="width:100px;height:100px;"/>

How to change an image every 5 seconds for example?

you should run 'change' function outside of the func and pass the function name to the setInterval func as below

let images = ['photoFromInternet', 'photoFromInternet2', 'photoFromInternet3'];

let index = 0;
const imgElement = document.querySelector('#mainPhoto');

function change() {
   imgElement.src = images[index];
   index > 1 ? index = 0 : index++;
}

window.onload = function () {
    setInterval(change, 5000);
};

Image change triggered by time and click

Sure, not a problem. You can do it with the following code:

HTML

<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>

Javascript

// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;

// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
    img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';   
}, 2000);

// Register the click event handler for the image and clear the timeout
img.onclick = function(){
    clearTimeout(timeout);
    this.src = origSrc;    
}

You can see it in action here.

Change the image with JS every time the button is clicked

You have a few problems with your code, as others have pointed out. As Teemu said, you are adding 3 click listeners to the button. You also need to put the turn page function into your listener, instead of calling it outside. These are the main changes you need:

1: You need to declare a variable outside of the listeners and any loops to keep count of the pages

    let count = 0; 

2: Add a listener that will call your turnpage function on each click. In that listener, you need to check that the next page isn't greater than the total number of pages before calling turnPage- otherwise you will get an error when the code tries to access the image from a non-existent page.

(You could instead start again at page 1, but as you have a Start button I assumed that you will intend to use that instead of having a continuous loop).

    next.addEventListener('click', () => {
       if ((count+1) < book.length)
          turnPage(count);
       count++;
    })

3: Finally, your turnPage function just needs to set up the next image

    const turnPage = (count) => {
        mainImg.src = book[count + 1].img
    }

Here is the full working snippet:

document.addEventListener('DOMContentLoaded', () => {

  let book = [{
      name: 'page1',
      img: 'https://lorempixel.com/output/animals-q-c-200-200-9.jpg'
    },
    {
      name: 'page2',
      img: 'https://lorempixel.com/output/animals-q-c-200-200-10.jpg'
    },
    {
      name: 'page3',
      img: 'https://lorempixel.com/output/animals-q-c-200-200-4.jpg'
    }
  ]

  const main_page = document.querySelector('.main_page'); // with this variable I have conttrol of
  // div with class .main_page

  let mainImg = document.createElement('img') // similar to HTML tag <img>. this var-ble creates <img> tag in HTML Document
  mainImg.setAttribute('src', book[0].img) // making attribute to <img> tag through JavaScript    
  main_page.appendChild(mainImg); // appending <img> tag to the div with class main_page
  let next = document.getElementById('next');

  // set up your listener to turn the page on each click
  next.addEventListener('click', () => {
  let count = 0;    // declare your variable for page count
    // check  if the next page is greater than the total number of pages
    if ((count+1) < book.length)
        turnPage(count);
    count++;  
  })

  // your turnPage function
  const turnPage = (count) => {
    if (mainImg.getAttribute("src") == book[count].img) {
        mainImg.src = book[count + 1].img
    }
  }

})

<body>
  <div class="main_page">
    <button type="button" id="start">Start</button>
    <button type="button" id="next">Next</button>
  </div>
</body>

Changing img using an event onclick function using javascript -- resolved

using the onclick method didn't work for me so I attached click listeners to each attribute I wanted to click on and just changed the image source. here is the code that worked for me!

var foundationListen = document.querySelectorAll("[alt='foundation']");

for(var i=0; i < foundationListen.length; i++){

    foundationListen[i].addEventListener("click", function(){

        var image =  document.querySelector("div#face img");
        image.src = "../static/images/foundation.png";

    });

};

---

Related Topics