Member Avatar for soapyillusion

Hello all,
Just took a JavaScript class, where they didn't teach us anything about slide shows. Now I have a client and I promised them a slide show on their website. I made an external Js file, and Firefox debugger keeps on giving me this error: document[place].src is undefined.

Here's the code from the external .js, again really unfamiliar with this so I based it off example code I found:

var num=0; 
var imgName="pictures/";
var slideImg= new Array();
slideImg[0]=new imageItem(imgName+"1.jpg");
slideImg[1]=new imageItem(imgName+"2.jpg");
slideImg[2]=new imageItem(imgName+"3.jpg");
                       

function imageItem(image_location)
{
  this.image_item = new Image();
  this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj)
{
  return(imageObj.image_item.src)
}

function getNextImage()
{
  
   if(num < slideImg.length)
   {
   var new_img=get_ImageItemLocation(slideImg[num]);
   return(new_img);
   }
   else 
   {
    num=1;
   }
}

function switchImage(place)
{
  var  new_img = getNextImage();
  document[place].src=new_img;
  
  setTimeOut(switchImage(place));
}

The problem should be in the last function switchImage(). Any help at all would be appreciated guys, thanks!

  • 2 Contributors
  • 3 Replies
  • 110 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by soapyillusion

Dani AI

Generated

A few focused notes that address the exact error and common pitfalls seen in the thread.

The message "document[place].src is undefined" usually means the lookup returned nothing — document[...] is not a reliable way to get an element. was on the right track suggesting a DOM lookup, but that will still fail if the element ID/name doesn't exist or the script runs before the DOM is ready. Another immediate bug in the shown code is a misspelled API (setTimeOut) and the pattern setTimeout(switchImage(place)), which calls the function immediately instead of scheduling it.

A small, robust pattern: find the image element once, keep an index, update el.src, then call setTimeout with a function reference (or use the modern setTimeout(fn, ms, arg1, ...)). Example starter you can drop into a page (avoid running before DOM ready):

function startSlideshow(imgId, urls, ms) {
  var el = document.getElementById(imgId);
  if (!el) { console.error('Image element not found:', imgId); return; }
  var i = 0, timer;
  function advance() {
    el.src = urls[i];
    i = (i + 1) % urls.length;
    timer = setTimeout(advance, ms);
  }
  advance();
  return function stop() { clearTimeout(timer); };
}

Quick checklist when debugging this kind of slideshow:

  • Confirm the image element exists (console.log(document.getElementById('yourId'))).
  • Ensure the script runs after the element is in the DOM (place script at body end or use DOMContentLoaded).
  • Use setTimeout (capital T) and pass a function reference, not the result of calling the function.
  • Validate image URLs and consider preloading with new Image().src.

References: setTimeout (MDN), getElementById (MDN), Image constructor (MDN).

Recommended Answers

All 3 Replies

Member Avatar for codewall

document[place].src=new_img;

Maybe this is what you want.

document.getElementById(place).src=new_img;

Member Avatar for soapyillusion

That didn't work either, but It seem to be more of a people want to make things complicated even with their tutorials. I found a much easier way of doing it in an old text book. So I just based my code off that. It works, and it makes me realize more that people have to complicate what could be simple code for no good reason. X_X

Member Avatar for soapyillusion

Thanks anyway guys appreciate the help!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.