uncaught type error when constructing new object

Question

I am cobbling together some scripts to create floating clouds on my page.

1. My problem occurs when I try to call the movechip() function.
2. Prior to calling that function (either in the for loop or in the function where the clouds are constructed) divs and images were appended to the container div and the objects contained the correct attributes (verified using the element inspector in developer tools)
3. I have tried moving the movechip() call from the constructor to the for loop but that has not helped
4. I removed the original styling (with css) and attached the styling with javascript. This has also not helped.

Using the full instructions for the use of the script (can be found at the bottom of this post) I have made a function which makes an image element, appends it to a div, appends the div to the page and calls the "chip" constructor function. I am calling the function in a for loop for the number of clouds I want on the page.

Here is the for loop:

for ( var i = 0; i <= cloudNo/4; i ++ ) {
// call a function which creates a new div and chip object
var cloudName = "flyingCloud" + i.toString();
newCloud(i);
movechip(cloudName);
}

Here is the function:

    // cloud function
function newCloud(number) {
  // assign a 'name' to the cloud to be used as the id and then passed to the chip function
  var cloudName = "flyingCloud" + number.toString();
 // create a div element to house the image
  var cloud = document.createElement('div');
// create an image element
  var cloudImg = document.createElement('img');
  // append the image to the div
  cloud.appendChild(cloudImg);
  // assign image src as cloud url
  cloudImg.src = cloudImageUrl;
  // assign the cloudname as the ID
  cloud.id = cloudName;
  // set the style of the cloud div
  cloud.setAttribute('style', 'position:absolute; left: -500px; width:50; height:62; font-size:10px;');
  // append the cloud to the container div
  cloudDiv.appendChild(cloud);
  // create a new chip
  cloud = new Chip(cloudName, 362,362);
}

but I keep getting this error: moveobj.js:71 Uncaught TypeError: Cannot read property 'style' of null(…)

here is a link to the problem code, line 71 is trying to access the style property of the 'chip': http://samisite.com/extras/HTMLobj-1640/moveobj.js

I realise this may be a very easy problem to fix but can't seem to figure out what's wrong. I would be really grateful for any input.

full instructions can be found here: http://dynamicdrive.com/dynamicindex4/flyimage.htm

Answer 1

setAttribute only overrides the style attribute to the last one! I didn't know that so I found another solution for you

Styling JS Dom object

cloud.style.position = "absolute";
cloud.style.left = "-500px";
cloud.style.width = "50px";
cloud.style.height = "62px";
cloud.style.fontSize = "10px";