How to show my image object?

[LearningCoder]

Hi all,

I have a script which generates a random image every 10 seconds. I have created an image object and set the attributes but when I try to display the image it is showing [object HTMLImageElement].

I searched around but can't seem to find an answer. Here is my code:



function change_image(){
var image = new Image();
var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
image.setAttribute("src",imgDir+"/"+image_names[index]);
image.setAttribute("alt",image_names[index]);
console.log(image);
/*var image = "<img src='"+imgDir+"/"+image_names[index]+"' alt='Gardenable Products' title='"+image_names[index]+"' id='random_image' />";*/
document.getElementById("image_div").innerHTML = image;
document.getElementById("text").innerHTML = product_text;
}

var image_names = new Array("bench1.jpg","bench2.jpg","bench3.jpg","bench4.jpg","bench5.jpg",
"binstore1.jpg","binstore2.jpg","binstore3.jpg","binstore4.jpg","binstore5.jpg",
"birdhouse1.jpg","birdhouse2.jpg","birdhouse3.jpg","birdhouse4.jpg","birdhouse5.jpg",
"gate1.jpg","gate2.jpg","gate3.jpg","gate4.jpg","gate5.jpg",
"pethousing1.jpg","pethousing2.jpg","pethousing3.jpg","pethousing4.jpg","pethousing5.jpg",
"planter1.jpg","planter2.jpg","planter3.jpg","planter4.jpg","planter5.jpg",
"shed1.jpg","shed2.jpg","shed3.jpg","shed4.jpg","shed5.jpg",
"table1.jpg","table2.jpg","table3.jpg","table4.jpg","table5.jpg");

var product_text = "<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature"
product_text += "from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked"
product_text += "up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage</p>";

var imgDir = "core/product_files";


window.onload = setInterval("change_image()",10000);


The line which is commented out inside the function works but I was advised to just change the attributes rather than creating a new element. Instead of innerHTML I have also tried appendChild, but when I use appendChild it doesn't show anything at all.

Thank you in advance for any help you can give me.

Kiind regards,

LC.

[jscheuer1]

Using innerHTML with that line uncommented is workable but not ideal. And it looks like there are other problems with the code. But if it was working with that commented line uncommented, I suppose it's serviceable. You're not showing any markup. Let's say you have an image somewhere on the page:


<img src="core/product_files/bench1.jpg" id="productimage" alt="products" title="">

Then to change the image:


function change_image(){
var image = document.getElementById('productimage');
var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
image.setAttribute("src",imgDir+"/"+image_names[index]);
image.setAttribute("alt",image_names[index]);
console.log(image.src);
document.getElementById("text").innerHTML = product_text;
}

[LearningCoder]

Sorry I should have explained a little better.

There is no initial image on the page. I create an array and pick a random entry from when the page loads. The reason I haven't hardcoded an image in is because I want a random one each time someone visits. I need a way to be able to build up the <img> tag and then insert it into the DOM (I believe).

Here is my HTML:


<div id="featured_products_div">
<h3>Our featured products!</h3>
<div id="image_div"></div>
<div id="text"></div>
</div>


As you can see I have no initial product, it is all generated by the javascript.

How can we get around this?

Would it be best to put an initial image in the html and then change the values and use innerHTML again to re-set the values of the image??

Thanks for the reply!

Regards,

LC.

[jscheuer1]

You can create it and insert it the first time, then use it every time thereafter:


function change_image(){
var image;
if(!document.getElementById('productimage')){
image = document.createElement('img');
image.id = 'productimage';
document.getElementById('image_div').appendChild(image);
}
image = document.getElementById('productimage');
var index = Math.floor((Math.random() * y));//generates a random number between 0-length of array
image.setAttribute("src",imgDir+"/"+image_names[index]);
image.setAttribute("alt",image_names[index]);
console.log(image.src);
document.getElementById("text").innerHTML = product_text;
}

But as I said, it looks like the code has other problems. None of the images will be cached for first time visitors, so things will be a bit jerky until they are. If the images are small enough in byte size, it would be reasonable to preload them or at least the first 2 or 3. And random means random. Any given image may appear at any given time. You might get repeat images or one or more images will show up a lot at the expense of the others. Generally what's done in a case like that is to shuffle array once on page load and allow the images to show in order from that point on. But those are other topics.

[LearningCoder]

Thanks very much, only just had a chance to properly read the post. I will work on it in the next few hours.

Also, my intention was to just get it working, displaying the image then I was going to add a while loop which deals with if it picks the same image again because I had a couple of console.log()'s when I first wrote it which was logging the src's and I noticed then that on the odd occasion it would pick the same image.

Just to note I have a function which preloads the images when the site is accessed. I didn't add it here because I don't think my problem relates to that. I can post it if you would like to view it.

Thank you for your knowledge.

Kind regards,

Lc.