CODEWITHSUNDEEP
javascripthtml
Abii
Abii

Reputation: 3

Show image ( 5 seconds then hide) , click show image ( to see next image) ?

I'm new to this. I am trying to create a HTML code which runs in HTML. It shows a image for 5 seconds and hides, next image is shown via button.

I found most of the codes via online. Can someone see where i am going wrong here. 

<!DOCTYPE html>
<html>

<head>

<button id="next" onclick="showNext();">Show next image</button>

<div class="image" style="display: none;"><img src=“1.jpg”></div>
<div class="image" style="display: none;"><img src=“2.jpg”></div>
<div class="image" style="display: none;"><img src=“3.jpg”></div>


<script type="text/javascript">
    var divs = document.querySelectorAll('div.image');


    var button = document.getElementById('next'); //button.
    var currentImage = 0;
    function showNext() {
        button.style.display = 'inline';
        divs[currentImage].style.display = 'block';
        setTimeout(hide, 5000);
    }

    function hide() {
        button.style.display = 'block';
        divs[currentImage].style.display = 'none';
        currentImage = (currentImage + 1) % divs.length;
    }
</script>

</head>

</html>

this is the JS that is used 

var divs = document.querySelectorAll(‘image'); 
    var button = document.getElementById('next'); 
    var currentImage = 0;
    function showNext() {
        button.style.display = 'inline';
        divs[currentImage].style.display = 'block';
        setTimeout(hide, 500000);
    }

    function hide() {
        button.style.display = 'block';
        divs[currentImage].style.display = 'none';
        currentImage = (currentImage + 1) % divs.length;
    }

Upvotes: 0

Views: 3312

Answers (1)

Mehdi Dehghani
Mehdi Dehghani

Reputation: 11601

Updated

So, here is working code:

HTML

<button id="next">Show next image</button>

<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/990000/fff.jpg"></div>
<div class="image" style="display: none;"><img src="http://dummyimage.com/100x100/009900/fff.jpg"></div>

JS

var divs = document.querySelectorAll('.image');
var button = document.getElementById('next');
var currentImage = 0;

button.addEventListener('click', function(){
    button.style.display = 'inline';
    divs[currentImage].style.display = 'block';
    setTimeout(hide, 2000);
});

function hide() {
    button.style.display = 'block';
    divs[currentImage].style.display = 'none';
    currentImage = (currentImage + 1) % divs.length;
}

I provided jsfiddle too.

Upvotes: 1

Related Questions