Slideshow text

[Lucy]

I'm trying to create a slideshow with text underneath it (for no reason other than testing what I've learned. Disclaimer: I'm using a video tutorial for the most part)

The text I want is the part I'm struggling with. I've not even added in the interval thing yet to make it rotate. Here's what I've got:

var text = document.getElementById("caption");var dog1 = {name : 'Bernie', breed : 'Bernese Mountain', ###### : 'male', age : '2'} ;var dog2 = {name : 'Fiona', breed : 'Dalmation', ###### : 'female', age : '10'} ;var dog3 = {name : 'Malty', breed : 'Leonberger', ###### : 'male', age : '5'} ;var dog4 = {name : 'Shep', breed : 'German Shepherd', ###### : 'male', age : '9'} ;var manydogs = [dog1, dog2, dog3, dog4];var captionindex = 0;function doginfo()	{	var textcontent =  'Name: ' + this.name + '<br/>' + 	'Breed: ' + this.breed + '<br/>' + 	'######: ' + this.###### + '<br/>' + 	'Age: ' + this.age + '<br/>';	text.innerHTML = textcontent;}function print()	{for (captionindex <= manydogs.length; captionindex++	{		manydogs[captionindex].output = doginfo;		manydogs[captionindex].output();	}}print();

Firebug made me put a semicolon at the end of the for statement. I'm pretty sure that doesn't need to be there, but it insisted.

I don't get any errors, but it just doesn't work. I've tried changing it in all sorts of ways and nothing appears in the div specified. I'm sure I've just done this in completely the wrong way and the code's a mess, though. Honestly though, it seems like it should work. Can anyone help?

 

Kind of want to just give up learning Javascript right now - I doubt anyone else finds it this confusing.

 

Oh my... haha... the hashes are covering up another word for 'gender'.

[davej]

Before proceeding you really should pause and review basic syntax such as for-loops...

 

http://www.w3schools.com/js/tryit.asp?filename=tryjs_loop_for

 

...although I don't think you should need a for-loop in a slideshow.

 

http://www.w3schools.com/js/

[Lucy]

But what's wrong with it? The variable is already declared, so surely I don't need to do so again - there's a condition there too. I can't see how anything is missing/written incorrectly?

[justsomeguy]

A for loop has 3 parts, you only have 2. You need to give all 3, always, even if one of them is empty. If you only give 2 parts then the browser doesn't know which one you're leaving out. You can give it a null initialization statement if you want to :

for (; captionindex <= manydogs.length; captionindex++)

I believe that will work, I think the semicolon at the beginning is enough to tell the browser that there's no initialization. Or, you could just do basically a no-op:

for (captionindex; captionindex <= manydogs.length; captionindex++)

But just leaving out a required part and expecting the computer to know what you intend isn't an option. Computers don't assume things, you need to tell them.

[Lucy]

Oh... right - okay. Thank you.

[Lucy]

The problem I'm now having is that, with the interval set now, it displays only the last object in the array (dog4) and afterwards I get the error: manydogs[captionindex] is undefined (over and over). Any ideas? New code is below:

var text = document.getElementById("caption");var dog1 = {name : 'Bernie', breed : 'Bernese Mountain', ###### : 'male', age : '2'} ;var dog2 = {name : 'Fiona', breed : 'Dalmation', ###### : 'female', age : '10'} ;var dog3 = {name : 'Malty', breed : 'Leonberger', ###### : 'male', age : '5'} ;var dog4 = {name : 'Shep', breed : 'German Shepherd', ###### : 'male', age : '9'} ;var manydogs = [dog1, dog2, dog3, dog4];var captionindex = 0;function doginfo()	{	var textcontent =  'Name: ' + this.name + '<br/>' + 	'Breed: ' + this.breed + '<br/>' + 	'######: ' + this.###### + '<br/>' + 	'Age: ' + this.age + '<br/>';	text.innerHTML = textcontent;}function print()	{	for (var captionindex = 0; captionindex <= manydogs.length; captionindex++)	{		manydogs[captionindex].output = doginfo;		manydogs[captionindex].output();	}	if (captionindex >= manydogs.length)	{		captionindex = 0;	}}var timing = setInterval(print, 2000);document.onclick = function()	{	clearInterval(timing);};

[Ingolme]

The <= operator on this line is one problem:

for (var captionindex = 0; captionindex <= manydogs.length; captionindex++)    {

It should just be <.

[justsomeguy]

It's looping through each of them, but this line:text.innerHTML = textcontent;is overwriting whatever is in that element every time. So the second one overwrites the first one, the third one overwrites the second one, etc. So you only get the last one. Maybe you should clear the content of that element to start with, and then append text to it instead of overwriting. You could clear the content in the print function before the loop.

[davej]

Looks flawed to me. It only needs to run the for-loop one time, and then it needs a static index.

 

Why not use a constructor and a prototype for the output?

var Dog = function(n,b,g,a,i){  this.name = n;  this.breed = b;  this.gender = g;  this.age = a;  this.image = i;};Dog.prototype.output = function(){   var x = 'Name: ' + this.name + '<br/>' + 	  'Breed: ' + this.breed + '<br/>' + 	  'Gender: ' + this.gender + '<br/>' + 	  'Age: ' + this.age;   document.getElementById('caption').innerHTML = x;   document.getElementById('photo').src = this.image;};var dogs = [];dogs[0] = new Dog('Bernie','Bernese Mountain', 'male',  '2', 'images/bernie.jpg');dogs[1] = new Dog('Fiona', 'Dalmation',        'female','10','images/fiona.jpg');dogs[2] = new Dog('Malty', 'Leonberger',       'male',  '5', 'images/malty.jpg');dogs[3] = new Dog('Shep',  'German Shepherd',  'male',  '9', 'images/shep.jpg');

[Lucy]

It's looping through each of them, but this line:text.innerHTML = textcontent;is overwriting whatever is in that element every time. So the second one overwrites the first one, the third one overwrites the second one, etc. So you only get the last one. Maybe you should clear the content of that element to start with, and then append text to it instead of overwriting. You could clear the content in the print function before the loop.

 

Yeah, I thought that might be it. So you're saying use a text node instead of the innerHTML method? I just don't know what to do about the line breaks, with that :/

 

Davej - not sure what you mean by having an index, but I'll look it up.

[davej]

Your code calls print() every two seconds and print() executes a for-loop. This makes no sense at all.

 

The obvious intention of your code is to add the doginfo method to each object, but that only needs to be done one time. The print function is wrong. Something like this would probably work...

function print() {	if (captionindex >= manydogs.length) {		captionindex = 0;	}	manydogs[captionindex++].output();}for (var i = 0; i < manydogs.length; i++) {	manydogs[i].output = doginfo;}

[justsomeguy]

You don't need to use a text node, you can still use innerHTML. In the print function, before the loop, set innerHTML to be empty. In the doginfo function, instead of overwriting innerHTML you need to append to it.

text.innerHTML += textcontent;

The obvious intention of your code is to add the doginfo method to each object, but that only needs to be done one time.

That can be done when they are defined also without a prototype:

var dog1 = {name : 'Bernie', breed : 'Bernese Mountain', ###### : 'male', age : '2', output: doginfo} ;

Note that the print function does not need the last if statement, since it will initialize the counter before the loop. With the above it will just need to be this:

function print()  {  for (var captionindex = 0; captionindex < manydogs.length; captionindex++) {    manydogs[captionindex].output();  }}

[davej]

print gets called every 2 seconds.

[justsomeguy]

I understand. There's no reason to run it on a loop if it doesn't do anything different, but I see what it does.Oh, you're saying she might want it to print each dog individually 2 seconds apart. Right, if it's a rotating banner or something then what you showed would be correct.

[davej]

 

Disclaimer: I'm using a video tutorial for the most part)

 

If this is a "tutorial" someone actually posted I'd say they are pretty clueless.

[Lucy]

 

If this is a "tutorial" someone actually posted I'd say they are pretty clueless.

 

Sorry, I probably wasn't very clear. I meant I'm learning using a video tutorial - this code, however, is my own, based on the code used in the tutorial for an image slideshow. I've been trying out my own stuff as I go along to try and make sure I understand it properly. I thought I could try adding this text in under each image as it goes along. If that makes sense. It seems this was probably a bit too complicated for me at the moment though. I might just try starting from the beginning of the tutorial again - evidently I don't understand the basics yet.

[davej]

The following was my basic non-oop concept of what I thought you might be trying to achieve...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#photo{display:block;height:480px;width:640px;border:5px solid #bbb;border-radius:5px;}#caption{width:640px;border:5px solid #bbb;border-radius:5px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';window.onload = init;var idx;var running = false;var TIMEDELAY = 3000;function init() {  document.getElementById('btn1').onclick = startstop;  idx = 0;  displayPhoto(dog[0]);  displayCaption(dog[0]);}var dog = [];dog[0] = {name:'Bernie', breed:'Bernese Mountain', gender:'male', age:'2', image:'images/bernie.jpg'};dog[1] = {name:'Fiona', breed:'Dalmation', gender:'female', age:'10', image:'images/fiona.jpg'};dog[2] = {name:'Malty', breed:'Leonberger', gender:'male', age:'5', image:'images/malty.jpg'};dog[3] = {name:'Shep', breed:'German Shepherd', gender:'male', age:'9', image:'images/shep.jpg'};function displayPhoto(dog){  document.getElementById('photo').alt = "Can't find file: ["+ dog.image +"]";  document.getElementById('photo').src = dog.image;}function displayCaption(dog) {  var textcontent =  'Name: ' + dog.name + '<br/>' +       'Breed: ' + dog.breed + '<br/>' +       'Gender: ' + dog.gender + '<br/>' +       'Age: ' + dog.age;  document.getElementById('caption').innerHTML = textcontent;}function startstop() {  if(running){    running = false;    document.getElementById('btn1').value = 'Start Slideshow';  }else{    running = true;    document.getElementById('btn1').value = 'Stop!!!';    slideshow();  }}function slideshow() {  if (running){    idx++;    if (idx>=dog.length){      idx = 0;    }    displayPhoto(dog[idx]);    displayCaption(dog[idx]);    setTimeout(slideshow, TIMEDELAY);  }}</script></head><body><input type="button" id="btn1" value="Start Slideshow"/><div><img id="photo" src="" alt="image"/></div><div id="caption"></div></body>    </html>

...But then it seemed that you were diving into some sort of OOP approach, so this would be an OOP approach...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#photo{display:block;height:480px;width:640px;border:5px solid #bbb;border-radius:5px;}#caption{width:640px;border:5px solid #bbb;border-radius:5px;}</style><script>window.onerror = function(a, b, c, d){alert('Javascript Error:n'+a+'nURL: '+b+'nLine: '+c+'  Column: '+d);return true;}</script><script>'use strict';var idx;var timing = null;var TIMEDELAY = 2000;function init() {  document.getElementById('btn1').onclick = startstop;  idx = 1;  dogs[0].output();}var Dog = function(n,b,g,a,i){  this.name = n;  this.breed = b;  this.gender = g;  this.age = a;  this.image = i;};Dog.prototype.output = function(){   var x = 'Name: ' + this.name + '<br/>' + 	  'Breed: ' + this.breed + '<br/>' + 	  'Gender: ' + this.gender + '<br/>' + 	  'Age: ' + this.age;   document.getElementById('caption').innerHTML = x;   document.getElementById('photo').alt = "Can't find file: ["+ this.image +"]";   document.getElementById('photo').src = this.image;};var dogs = [];dogs[0] = new Dog('Bernie','Bernese Mountain', 'male',  '2', 'images/bernie.jpg');dogs[1] = new Dog('Fiona', 'Dalmation',        'female','10','images/fiona.jpg');dogs[2] = new Dog('Malty', 'Leonberger',       'male',  '5', 'images/malty.jpg');dogs[3] = new Dog('Shep',  'German Shepherd',  'male',  '9', 'images/shep.jpg');function print(){  dogs[idx++].output(); // execute the current object's method  if (idx>=dogs.length){    idx = 0;  }}function startstop() {  if (timing==null){    timing = setInterval(print, TIMEDELAY);    document.getElementById('btn1').value = 'Stop!!!';  }else{    clearInterval(timing);    timing = null;    document.getElementById('btn1').value = 'Start Slideshow';  }}window.onload = init;</script></head><body><input type="button" id="btn1" value="Start Slideshow"/><div><img id="photo" src="" alt="image"/></div><div id="caption"></div></body>    </html>