Code from and assignment in my Scripting technologies class
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title>innerHtml.html</title>
<script type = "text/javascript">
//<![CDATA[
//get names
function welcomeStudent(){
txtName = document.getElementById("txtName");
ltxtName = document.getElementById("ltxtName");
divOutput = document.getElementById("divOutput");
name = txtName.value;
lname = ltxtName.value;
divOutput.innerHTML = " Welcome";
divOutput.innerHTML += "<em>" + name + " " + lname + "<\/em>";
divOutput.innerHTML += " to CIST 1520.";
}
// change backgroundColors
function changeColor(color){
document.body.style.backgroundColor = color;
} // end changeColor
//]]>
</script>
</head>
<body>
<h1>Click a button to change the color</h1>
<form action = "">
<fieldset>
<input type = "button"
value = "blue"
onclick = "changeColor('blue')"/>
<input type = "button"
value = "green"
onclick = "changeColor('green')" />
<input type = "button"
value = "red"
onclick = "changeColor('red')" />
</fieldset>
</form>
<h1>Welcome to Cist 1520 Assignment 6</h1>
<form action = "">
<fieldset>
<label>Please type your first name</label>
<input type = "text"
id = "txtName" />
<label>Please type your last name</label>
<input type = "text"
id = "ltxtName" />
<button type = "button"
onclick = "welcomeStudent()">
Display Greeting
</button>
</fieldset>
</form>
<div id = "divOutput">
Your Message Will Appear Here!
</div>
</body>
</html>
The Code above helps to understand how innerHTML works..
No comments:
Post a Comment