javascript to write in <div>

[onehp]

This script will make a christmas tree but I want it to write it in the div named content instead in the body.

<script>
var width = 1;
 
for(height=0; height<=5; height++)
 {
 for(subHeight=0; subHeight<=5; subHeight++)
  {
  for(subWidth=1; subWidth<=width; subWidth++)
   {
     var Ornament=Math.round(Math.random()*10)+1;
     var oColor=Math.floor(Math.random()*16000000)+1;

     if (Ornament<=1)      
      {
      document.write("<font color="+oColor+">1</font>");
      }

     if (Ornament>=2)
      {
      document.write("<font color="+oColor+">0</font>");
      }
   } 
  document.write("<br>")
  width = width + 1;
  }
 width=width - 2;//thickness
 }
</script>

<div id="content">
</div>

 

[DDRtists]

document.getElementById('content').write("");

Untested.

 

[onehp]

Firebug error

document.getElementById("content").write is not a function
 document.getElementById('content').write("<font color="+oColor+">0</font>");

var width = 1;
 
for(height=0; height<=5; height++)
 {
 for(subHeight=0; subHeight<=5; subHeight++)
  {
  for(subWidth=1; subWidth<=width; subWidth++)
   {
     var Ornament=Math.round(Math.random()*10)+1;
     var oColor=Math.floor(Math.random()*16000000)+1;

     if (Ornament<=1)    
      {
       [B]document.getElementById('content').write("<font color="+oColor+">1</font>");[/B]
      }

     if (Ornament>=2)
      {
       [B]document.getElementById('content').write("<font color="+oColor+">0</font>");[/B]
      }
   } 
  tree += ("<br>")
  width = width + 1;
  }
 width=width - 2;//thickness
 }

 

[DDRtists]

var content = document.getElementById('content').innerHTML;
document.getElementById('content').innerHTML = var + "";

 

[onehp]

Great! Thank you very much!

 

[onehp]

(deleted) NM fixed

 

[onehp]

I want to set a variable as the value of an input in a form. With that value the script will make the background color = to that var value. I used:

 varcolor=document.getElementById('content').tableForm.color.value;

but Firebug gave me error:

document.getElementById("content").tableForm has no properties
 var color = document.getElementById('content').tableForm.color.value;

Here are the stuff:

<script>
function changeBGcolor()
{
 var color = document.getElementById('content').tableForm.color.value;
 document.getElementById('content').style.background = color;
}
</script>

<div id="content">
<form name = tableForm>
 <table border = 1>
  <tr>
   <td>Background color</td>
   <td>
    <input type = text
           name = color>
   </td>
  </tr>
 </table>
</form>
</div>

 

[DDRtists]

Try Making the input like this:

    <input type="text" name="color" />

Then the code to get the data would be:

var yourvariable = document.getElementById('color').value;

 

[onehp]

Firebug error:

document.getElementById("color") has no properties
 var color = document.getElementById('color').value;

 

[DDRtists]

<input type="text" name="color" value="" />

How about that?

 

[mase]

DDR your input doesn't have the id="color" only name="color"

<input type="text" name="color" id="color" value="" />

 

[onehp]

It does not show error anymore, but it does not change the background

<input type = button
        value = "change"
      onClick = changeBGcolor()>

function changeBGcolor()
{
 var color =  document.getElementById('color').value;
 document.getElementById('content').style.background = color;
}

 

[mase]

document.getElementById('content').style.backgroundColor = color;
OR
document.getElementById('content').style.background-color = color;

Try those.

 

[onehp]

heh it worked . Thank you

but I am confused. In one code I wrote this:

document.getElementById('content').style.background="red";

and this changes the background color without adding color at the end of background

 

[DDRtists]

JavaScript will not change the source. It will only do it visually, you will not be able to see the changes made by JS in the coding source.

 

[onehp]

1)My page that contains <div id="content"> has CSS style file linked to page. In CSS, I set

#content {
cursor: url("images/CursorC.cur"), url("images/CursorN.cur"), pointer;
overflow: scroll;
}

But when I mouse over the scroll, the pointer becomes the default pointer but on mouse out, it becomes my custom cursor. How do I make the scrollbar to display my custom cursor?

2)When I run a javascript that pops up a window, my mouse becomes the default pointer but after the execution, it is back to my custom cursor. How do I make the cursor during javascript popups to be my custom cursor?

3) In Firefox, you see a picture next to and to the very left of the URL address. How do I do this?

 

[phyrex1an]

3) In Firefox, you see a picture next to and to the very left of the URL address. How do I do this?

It's called a favicon, read this http://www.thesitewizard.com/archive/favicon.shtml for help on how to create one.

 

[mase]

2) Make sure you have the CSS in the page that is being popped up.

 

[onehp]

2) The javascript is an onclick event function. I already have CSS loaded on page

 

[mase]

2) The javascript is an onclick event function. I already have CSS loaded on page

On the popup page? Or just the page the JS link is on?