HTML: ch14 IC_1A – display Welcome box, collectvisitors name in a box, display a welcome message using thevisitor’s name, change the color of the page to yellow or greenthrough a visitor’s choice box, use Mouseover and Mouseout todisplay the difference.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>JavaScript Practice</title>
<meta charset=”utf-8″>
</head>
<body>
<h1>Using JavaScript</h1>
</body>
</html>
Answer
Html code:
<!DOCTYPE html>
<html lang = “en”>
<head>
<title>JavaScript Practice</title>
<meta charset=”utf-8″>
<style type=”text/css”>
.colorChange{
border: 2px solid blue;
position: static;
height: 30px;
width: 100px;
text-align: center;
padding: 10px;
float: right;
}
h1{
color: white;
background: blue;
text-align: center;
}
</style>
</head>
<body>
<!–display welcome message–>
<h1 id=”demo”></h1>
<form id=”frm” >
Your Name: <input type=”text” name=”fname” id=”yourName”><br>
</form>
<button onclick=”myFunction()”>Display</button>
<!–display visitors name–>
<p id=”demo1″></p>
<div > <!– for color option–>
<p class=”colorChange” style=”background: yellow”><aonmouseover=”document.bgColor=’yellow'”>Yellow</a></p>
<p class=”colorChange” style=”background: green” > <aonmouseover=”document.bgColor=’green'”>Green</a></p>
</div>
</body>
<script type=”text/javascript”>
function myFunction() {
var