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.
5 answers
solution1
1 2011-04-15 13:20:28
以下是如何将页面的背景颜色设置为文本区域的值：
document.bgColor=document.getElementById('yourelementid').value;
solution2
1 ACCPTED 2011-04-15 13:23:46
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;
}
solution3
0 2011-04-15 13:20:28
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
solution4
0 2011-04-15 13:23:52
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 .
solution5
0 2011-04-15 17:05:15
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.