Hi All,

I'm using the following code to (try to) update the style of an element in javascript. As you'll no doubt gather from the code, I'm trying to edit the opacity of the element.

This code executes fine in FF, Opera and Chrome. However, Internet explorer keeps responding with 'style is null or not an object'. Basically, I don't think it's returning the correct element from the DOM, or, for that matter, any element.

To add some more specific guidance, on the homepage I call launch_randomise() in the onload method, which, after 5 seconds, calls randomise_bottom_images() which calls itself and the bottom image regeneration function every 5 seconds, ensuring the images are regenerated every five seconds.

Regenerating the bottom images is a three-step process: 1, fade out, 2 switch innerHTML, 3, fade back in. My functions for altering the opacity or innerHTML quite obviously rely on being able to talk about a DOM object, I know no other way of achieving this. I tried straight out getElementById but this doesn't seem to work in IE8, fine in FF, Op, GC.

So, after much googling I replaced getElementById(string) with my own getElement(string). However, this still doesn't work.

Any thoughts? Any help would be much appreciated!!

Getting elements/setting style functions

function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}

return descField;
}



// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}


Full Code:



function getElement(id, type)
{
var inputs = document.getElementsByTagName(type);
var descField = null;
for(var i=0;i<inputs.length;i++)
{
if(inputs.item(i).getAttribute('id') == id )
{
descField = inputs.item(i);
break;
}
}

return descField;
}



// setStyleById: given an element id, style property and
// value, apply the style.
// args:
// i - element id
// p - property
// v - value
//
function setStyleById(i, p, v) {
//var n = document.getElementById(i);
var n = getElement(i, 'div');
n.style[p] = v;
}

function replace_html(el, html) {
if( el ) {
oldEl = (typeof el === "string" ? document.getElementById(el) : el);
newEl = document.createElement(oldEl.nodeName);

// Preserve any properties we care about (id and class in this example)
newEl.id = oldEl.id;
newEl.className = oldEl.className;
//alert(newEl.id);
//set the new HTML and insert back into the DOM
newEl.innerHTML = html;

// alert(newEl.innerHTML);
if(oldEl.parentNode)
oldEl.parentNode.replaceChild(newEl, oldEl);
else
oldEl.innerHTML = html;

//return a reference to the new element in case we need it
return newEl;
}
};


function populate_array()
{
// this function's sole job is to populate the array of items to be used.


var da = new Array(8);

da[0] = new Array(3);
da[0][0] = "portfolio/garage_conversion_before.jpg";
da[0][1] = "portfolio/garage_into_kitchen.jpg";
da[0][2] = "pfimage1";

da[1] = new Array(3);
da[1][0] = "portfolio/refurb_old.jpg";
da[1][1] = "portfolio/refurb_new.jpg";
da[1][2] = "pfimage2";

da[2] = new Array(3);
da[2][0] = "portfolio/fireplace_old.jpg";
da[2][1] = "portfolio/fireplace_new.jpg";
da[2][2] = "pfimage3";

da[3] = new Array(3);
da[3][0] = "portfolio/bathroom1_old.jpg";
da[3][1] = "portfolio/bathroom1_new.jpg";
da[3][2] = "pfimage4";

da[4] = new Array(3);
da[4][0] = "portfolio/kitchen1_old.jpg";
da[4][1] = "portfolio/kitchen1_new.jpg";
da[4][2] = "pfimage5";

da[5] = new Array(3);
da[5][0] = "portfolio/bathroom2_old.jpg";
da[5][1] = "portfolio/bathroom2_new.jpg";
da[5][2] = "pfimage6";

da[6] = new Array(3);
da[6][0] = "portfolio/bathroom3_old.jpg";
da[6][1] = "portfolio/bathroom3_new.jpg";
da[6][2] = "pfimage7";

da[7] = new Array(3);
da[7][0] = "portfolio/ext1_old.jpg";
da[7][1] = "portfolio/ext1_new.jpg";
da[7][2] = "pfimage8";


return da;

}


function switchimage(folioItemNum, ImageState)
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}


// folioItemNum tells us which folio item to access,
// ImageState tells us which image to set.
// we will use ajax/dom to re-write the document.

var OldImageState = 1 - ImageState;

// 2d array of items.
var darray = populate_array();

// take one item and fade out
opacity(darray[folioItemNum][2], 100, 0, 500);

// re-arrange.
// with time delay.
window.setTimeout(function (a,b,c,d,e){
var y = "<a href=\"" + c + "\" rel=\"lightbox[" + d + "]\" class=\"hiddenimg\"><img src=\"" + c + "\" class=\"folioimghidden\"/></a><a href=\"" + b + "\" rel=\"lightbox[" + d + "]\"><img src=\"" + b + "\" class=\"folioimg\"/></a>";
replace_html(e, y);
opacity(e, 0, 100, 500);
},500,document.getElementById(darray[folioItemNum][2]),darray[folioItemNum][ImageState],darray[folioItemNum][OldImageState],folioItemNum,darray[folioItemNum][2]);


// done.
}


function regenbottomimgs()
{
var isOpera, isIE = false;
if(typeof(window.opera) != 'undefined'){isOpera = true;}
if(!isOpera && navigator.userAgent.indexOf('Internet Explorer')){isIE = true;}


var array = Array(3);
array[0] = -1;
array[1] = -1;
array[2] = -1;


array[0] = get_unique_random_int(6, array, 3);
array[1] = get_unique_random_int(6, array, 3);
array[2] = get_unique_random_int(6, array, 3);

var darray = populate_array();
var imgstr = "<img src=\"" + darray[array[0]][1] + "\" class=\"scaleddown1\" /><img src=\"" + darray[array[1]][1] + "\" class=\"scaleddown2\" /><img src=\"" + darray[array[2]][1] + "\" class=\"scaleddown2\" />";

opacity("bottomimgs", 100, 0, 500);


window.setTimeout(function (a,b){
var x = replace_html(b, a);
opacity(b, 0, 100, 500);
},500,imgstr,"bottomimgs");


}



function get_random_int(Max)
{
var randomnumber = Math.round( Math.random() * Max );
return randomnumber;
}


function get_unique_random_int(Max, List, List_Length)
{
var stop = 1
var esc = 0
var x = 0;
var i = 0;

while ( stop == 1 )
{
esc = 0;

x = get_random_int(Max);

for ( i = 0; i < List_Length; i++ )
{
if ( x == List[i] )
{
esc = 1;
break;
}
}

if ( esc == 0 )
{
stop = 0;
}
}

return x;
}


function randomise_bottom_images()
{
regenbottomimgs();
setTimeout("randomise_bottom_images()",5000);
}

function launch_randomise()
{
setTimeout("randomise_bottom_images()", 5000);
}

function switchallnew()
{
switchimage(0,1);
switchimage(1,1);
switchimage(2,1);
switchimage(3,1);
switchimage(4,1);
switchimage(5,1);
switchimage(6,1);
switchimage(7,1);
}



function opacity(id, opacStart, opacEnd, millisec)
{
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;

//determine the direction for the blending, if start and end are the same nothing happens
if( opacStart > opacEnd )
{
for(i = opacStart; i >= opacEnd; i--) {
setTimeout(function (opacity, id) {
setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");

},(timer * speed), i, id);
timer++;
}
}
else if(opacStart < opacEnd)
{
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout(function (opacity, id) {

setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");

},(timer * speed), i, id);
timer++;
}
}
}


Thanks,

A.

Fixed it, oh the frustration though.

I tried element.opacity = x in the onload function and hey presto it worked just like that.

Which led me to think; what's wrong with my code, then? Well, everywhere I've used pseudo functions (inline functions, whatever they're called), from that point forward including any subsequent function calls ( so if I define function(a){call something} inline) the DOM is inaccessible.

But only in IE.

You're also doing MozOpacity and KhtmlOpacity which IE does not support.

setStyleById(id, "opacity", (opacity / 100));
setStyleById(id, "MozOpacity", (opacity / 100));
setStyleById(id, "KhtmlOpacity", (opacity / 100));
setStyleById(id, "filter", "alpha(opacity=" + opacity + ")");
Try changing setStyleById to this:
function setStyleById(i, p, v) {
var n = document.getElementById(i);
if (n.style[p]) n.style[p] = v;
}