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>
Solution
HTML:
<!DOCTYPE>
<html>
<head>
<link rel=”stylesheet” type=”text/css”href=”style.css”>
</head>
<body>
<div align=”center”>
<dialog id=”myFirstDialog”>
<pid=”msg”>Welcome!!</p>
<input id=”name”type=”text” placeholder=”Enter name”>
<br><br><button id=”hide”hidden=”true”>CLOSE</button>
<br><button id=”add”
>ADD</button>
</dialog>
<p id=”msg1″></p>
</div>
<script type=”text/javascript”src=”script.js”></script>
</body>
</html>
JAVA SCRIPT:
var dialog = document.getElementById(‘myFirstDialog’);
document.getElementById(‘hide’).onclick = function() {
dialog.close();
document.getElementById(‘msg1’).innerHTML=”Welcome”+document.getElementById(‘name’).value;
};
document.getElementById(‘add’).onclick = function() {
var