CODEWITHSUNDEEP
javascripthtmlcssslideshow
Sarah
Sarah

Reputation: 21

JavaScript Slideshow Not Working as Intended

I am taking a computer science course and was given instructions for a specific way to create a slideshow. I've followed the instructions exactly, but the slideshow does not work properly. It is supposed to be so that when the displayed picture is clicked, an automatic slideshow begins, moving through the other pictures. However when the picture is clicked, it goes to the second picture but no further, even if clicked again. What am I doing wrong? I just want to make a slideshow through 4 pictures.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab</title>
<meta charset="utf-8">
<script>
	var showCounter = 0
	var myTimeout
	function myShow ( )
	{if (showCounter == 0)
	{document.getElementById('myPic').src="Greece.jpg"
	showCounter = 1}
	else if (showCounter == 1)
	{document.myPic.src="Korea.jpg"
	showCounter = 2}
	else if (showCounter == 2)
	{document.myPic.src="Bosnia.jpg"
	showCounter = 3}
	else
	{document.myPic.src="Austria.jpg"
	showCounter = 0}
	myTimeout = setTimeout ("myShow()", 500)
	}
</script>
</head>
<body>
<img src="Austria.jpg" alt="Aus" height="300" width="500" id="myPic"
onclick="myShow()">
<form name="imageForm" id="imageForm">
	<input type="button" name="b1" id="b1"
	value="Stop Slide Show"
	onclick="clearTimeout(myTimeout)">
</form>
</body>
</html>

Upvotes: 2

Views: 430

Answers (4)

Mister Jojo
Mister Jojo

Reputation: 22320

Using setTimeout is wrong. In this case you should use setInterval 

var
    showCounter    = 0,
    images         = [ "Greece.jpg", "Korea.jpg", "Bosnia.jpg", "Austria.jpg" ],
    intervalID     = 0,
    myPic_element  = document.getElementById('myPic'),
    StopButton     = document.getElementById('bt_stop')
;

myPic_element.onclick = function() {
    clearInterval(intervalID);
    intervalID = setInterval(myShow , 1000);
}

StopButton.onclick = function() {
    clearInterval(intervalID);
}

function myShow() {
    myPic_element.src = images[showCounter];
    myPic_element.alt = images[showCounter].split('.')[0];

    showCounter = (showCounter + 1 ) % images.length;
}
<img  id="myPic" src="Austria.jpg" alt="Austria" height="300" width="500" />

<button id="bt_stop">Stop Slide Show</button>

And there is easier no need to use Form element

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28563

Firstly, as mentioned above, you need to getElementById for all, and so I would recommend using a variable to reference myPic. In addition to adjusting the picture, i would re-assign values to the 'alt' in case the picture does not show, otherwise your default 'Aus' will show every time.

(On a sidenote, I realise you have been instructed to do the slideshow in a particular manner, but there are many easier ways to do a slideshow, and you will find many alternative methods on the site.. )

Hope this helps

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Lab</title>
  <meta charset="utf-8">

</head>

<body>
  <img id="myPic" src="Austria.jpg" alt="Austria" height="300" width="500" onclick="myShow()">
  <form name="imageForm" id="imageForm">
    <input type="button" name="b1" id="b1" value="Stop Slide Show" onclick="clearTimeout(myTimeout)">
  </form>
</body>
  <script>
    var showCounter = 0;
    var pic = document.getElementById('myPic');
    pic.src ="Austria.jpg";
    pic.alt="Aus";
    var myTimeout;
    

    function myShow() {
      if (showCounter == 0) {
        pic.src = "Greece.jpg";
        pic.alt="Greece"
        showCounter = 1;
      }
      else if (showCounter == 1) {
        pic.src = "Korea.jpg";
        pic.alt ="Korea"
        showCounter = 2;
      }
      else if (showCounter == 2) {
        pic.src = "Bosnia.jpg";
        pic.alt = "Bosnia";
        showCounter = 3;
      }
      else if (showCounter == 3) {
        pic.src = "Austria.jpg";
        pic.src="Austria";
        showCounter = 0;
      }
    
    myTimeout = setTimeout("myShow()", 1500)
    }
  </script>

</html>

Upvotes: 0

kopa
kopa

Reputation: 341

document.myPic.src="Bosnia.jpg"

isn't valid Javascript. You need to do document#getElementById() instead of just myPic. You got it right in the first one though.

document.getElementById('myPic').src="Greece.jpg"

Upvotes: 0

MomasVII
MomasVII

Reputation: 5071

You are not referring to the image src correctly. myPic is never assigned anywhere and the javascript crashes trying to find the undeclared variable.

var myPic = document.getElementById('myPic');

then you can use myPic whereever you need to reference the element src.

	var showCounter = 0
	var myTimeout
  var myPic = document.getElementById('myPic');
	function myShow ( )
	{
    if (showCounter == 0)
	  {
      myPic.src="https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png"
	    showCounter = 1
    } else if (showCounter == 1) {
      myPic.src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"
	    showCounter = 2
    } else if (showCounter == 2) { myPic.src="https://d3icht40s6fxmd.cloudfront.net/sites/default/files/test-product-test.png"
	    showCounter = 3
    } else {
    myPic.src="https://images.fireside.fm/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg"
	    showCounter = 0
    }
	  myTimeout = setTimeout ("myShow()", 500)
	}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab</title>
<meta charset="utf-8">
</head>
<body>
<img src="https://images.fireside.fm/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg" alt="Aus" height="300" width="500" id="myPic"
onclick="myShow()">
<form name="imageForm" id="imageForm">
	<input type="button" name="b1" id="b1"
	value="Stop Slide Show"
	onclick="clearTimeout(myTimeout)">
</form>
</body>
</html>

Upvotes: 0

Related Questions