I need help with DOM in javascript

Question

I am suppose to Create a form that gives the user 3 different options to change the background color of the page. When the user clicks one of the options, the background color changes to match.And also create a div with some basic text to start out. Create a form that has a textarea. Use document.getElementById('yourelementid') to both find the value of the textarea and to change the basic text created in the div. (Hint: user innerHTML) Now I know how to do the form but i dont know how to get it to change the background when the user clicks that button.I am not really understanding how to use the innerHTML at all. If someone could explain or give me some website on how to understand this. Thank you.

OK this is what I have so far and I am not still yet understanding it...

  <!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http:www.w3.org/1999/xhtml">
  <head>
   <title>background-color</title>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
 <script language="javascript" type="text/javascript">
  function changeBackgroundColor(objDivID)

   {
    var backColor = new String();

       backColor = document.getElementById(objDivID).style.backgroundColor;
    if(backColor.toLowerCase()=='#A20000C')

    {
    document.getElementById(objDivID).style.backgroundColor = '#DF64BD';

   }
    else
      {
   document.getElementById(objDivID).style.backgroundColor = '#FFDD73';
      }

    }

       </script>
      </head>
      <body>
      <h3>Change background color to:</h3>
      <div id="div1" style="background-color : #A2000C">
       <p><input type="radio" name="color" value="red" />Red<br />
      <input type="radio" name="color" value="pink" />Pink<br />
      <input type="radio" name="color" value="yellow" />Yellow<br />

      </div>
     <input type="button" value="click here"onclick="changeBackgroundColor('div1')"    /> 
      </body>
      </html>

i am still not sure why my box aint that big and is not chaning colors right i still have to have a box on there too. To ask to change the text of the color.

ok so i get this right you can use the select as a div or is this right... — norris1023, Apr 15 '11 at 15:14

score 1 · Answer 1 · answered Apr 15 '11 at 13:20

1

here is how you would set the background color of the page to the value of the text area:

document.bgColor=document.getElementById('yourelementid').value;

answered Apr 15 '11 at 13:20

derek

4,826
1
23
26

Ok I do have that right then..I am just so lost and confused that it is not even funny.I understand most of the things i have to do but to put it in a function so that it works. I am just lost. – norris1023 Apr 15 '11 at 13:23

score 1 · Accepted Answer · answered Apr 15 '11 at 13:23

You should add an event handler on the color-change options, like this (assuming it's an select box):

<select id="colorSelect">
    <option value="red">red</option>
    <option value="green">green></option>
</select>

document.colorSelect.onchange = function(){
    document.elementToChangeColor.style.backgroundColor= this.value;
}

score 0 · Answer 3 · answered Apr 15 '11 at 13:20

InnerHTML is basically everything between two tags (hence inner HTML):

<div>

Now to change the background, you would get the value from the form element and then write something like this to change a background color.

document.getElementById('your_element_id').style.backgroundColor = formElementValue

score 0 · Answer 4 · edited May 23 '17 at 09:58

The Mozilla documentation describes innerHTML fairly well. You may want to read through that page.

The innerHTML property of a DOM object provides as text the HTML contents of that object. So if you have the HTML:

<div id="myID"><span>Some text here!</span></div>

And the javascript:

var theHTML = document.getElementById('myID').innerHTML;
alert(theHTML);

Then you will see <span>Some text here!</span>.

If you set the innerHTML property to an HTML string, it will change the contents of the value. Given the HTML above if you have the following javascript:

var myDiv = document.getElementById('myID');
myDiv.innerHTML = '<span>Now this is some other text</span>';

Your div with the ID myID will change to show a span containing "Now this is some other text".

For changing the background color, look into changing the CSS attribute on the body. This question will help you see how this can be done. You will want to investigate document.body.style.

score 0 · Answer 5 · answered Apr 15 '11 at 17:05

I would use jQuery:

function selectionMade(color) {
    var body = $('body');
    body.css('background-color', color)

    var divWithSomeText = $('<div/>').Text = 'Some Text';
    body.Add(divWithSomeText);
}

jQuery makes the things you are trying to do really easy. If I were you I would pick up use of the library now so you can use it again in the future.

I need help with DOM in javascript

5 Answers5