[SOLVED] Problem with javascript when using "id" instead of "name"

[Solarpitch]

Hey,

 

I have the following piece of javascript to handle images on my page. The script works fine but when I change the form elements to "id" instead of "name"... the script stops working. The reason I am doing this is because XHTML Strict doesnt allow the use of name and you have to use ID. I am not sure how I can get around this to be honest.

 

// SCRIPT

<script type="text/javascript">
<!--
//Preloaded slideshow script- By Jason Moon
//For this script and more
//Visit http://www.dynamicdrive.com

// PUT THE URL'S OF YOUR IMAGES INTO THIS ARRAY...
var Slides = new Array(<?php print $images; ?>);


// DO NOT EDIT BELOW THIS LINE!
function CacheImage(ImageSource) { // TURNS THE STRING INTO AN IMAGE OBJECT
   var ImageObject = new Image();
   ImageObject.src = ImageSource;
   return ImageObject;
}

function ShowSlide(Direction) {
   if (SlideReady) {
      NextSlide = CurrentSlide + Direction;
      // THIS WILL DISABLE THE BUTTONS (IE-ONLY)
      document.SlideShow.Previous.disabled = (NextSlide == 0);
      document.SlideShow.Next.disabled = (NextSlide == 
(Slides.length-1));    
if ((NextSlide >= 0) && (NextSlide < Slides.length)) {
            document.images['Screen'].src = Slides[NextSlide].src;
            CurrentSlide = NextSlide++;
            Message = 'Picture ' + (CurrentSlide+1) + ' of ' + 
Slides.length;
            self.defaultStatus = Message;
            if (Direction == 1) CacheNextSlide();
      }
      return true;
   }
}

function Download() {
   if (Slides[NextSlide].complete) {
      SlideReady = true;
      self.defaultStatus = Message;
   }
   else setTimeout("Download()", 100); // CHECKS DOWNLOAD STATUS EVERY 100 MS
   return true;
}

function CacheNextSlide() {
   if ((NextSlide < Slides.length) && (typeof Slides[NextSlide] == 
'string'))
{ // ONLY CACHES THE IMAGES ONCE
      SlideReady = false;
      self.defaultStatus = 'Downloading next picture...';
      Slides[NextSlide] = CacheImage(Slides[NextSlide]);
      Download();
   }
   return true;
}

function StartSlideShow() {
   CurrentSlide = -1;
   Slides[0] = CacheImage(Slides[0]);
   SlideReady = true;
   ShowSlide(1);
}
// --> 
</script>


//FORM

<form id="SlideShow" action="">

<fieldset>

  <img id="Screen" alt="" src="" />  <br />
  <input type="button" id="Previous" value="Prev." onclick="ShowSlide(-1)" />
  <input type="button" id="Next" value="Next" onclick="ShowSlide(1)" />

</fieldset>
</form>

[xenophobia]

Just put the name into the form will work.

 

<form id="SlideShow" name="SlideShow" action="">

 

reason is because in your code, you are using this to identify your form element:

 

document.SlideShow.Previous.disabled....

 

Whereby document.SlideShow are required form's name. unless you do like this:

 

document.getElementById("SlideShow")....

 

Then you can omit the name in your form.

[Solarpitch]

Thanks,

 

but I will still get a validation error bu using name in the form. I might just have to change it to getElementById and I say that should work fine. Where would I substitute that into the script at the min?

[xenophobia]

if you want to get the previous button:

 

document.SlideShow.Previous.disabled = (NextSlide == 0);

You will use this:

document.getElementById("Previous").disabled = (NextSlide == 0);

 

We don't need to specify the form anymore. Whereby the Previous is your element's id.

 

By the way, i checked your code, the error are consist was because of the input name in your textbox:

<input type="button" id="Previous" value="Prev." onclick="ShowSlide(-1)" />

 

You should put like this:

<input type="button" name="Previous" value="Prev." onclick="ShowSlide(-1)" />

 

change the 'id' to 'name'.

[Solarpitch]

Ah right I see,

 

So then the last one to change would be the image... would it be something like this...

 

document.getElementById.images.("Screen").src = Slides[NextSlide].src;

[xenophobia]

Ah right I see,

 

So then the last one to change would be the image... would it be something like this...

 

document.getElementById.images.("Screen").src = Slides[NextSlide].src;

 

Nope is like this:

 

document.getElementById("Screen").src = Slides[NextSlide].src;

 

getElementById is a function. So you must follow a parenthesis right after it.

[Solarpitch]

Thanks for your help!