Page 375 - Web_Application_v2.0_C12_Fb
P. 375
<SCRIPT>
function changeBackgroundColor(color) {
document.body.style.backgroundColor = color;
}
</SCRIPT>
<BUTTON ONCLICK="changeBackgroundColor('RED')">RED</BUTTON>
<BUTTON ONCLICK="changeBackgroundColor('BLUE')">BLUE</BUTTON>
<BUTTON ONCLICK="changeBackgroundColor('GREEN')">GREEN</BUTTON>
<BUTTON ONCLICK="changeBackgroundColor('YELLOW')">YELLOW</BUTTON>
<BUTTON ONCLICK="changeBackgroundColor('PURPLE')">PURPLE</BUTTON>
<BUTTON ONCLICK="changeBackgroundColor('WHITE')">RESET</BUTTON>
</BODY>
</HTML>
Output of the preceding code is as follows:
6. Write a JavaScript program that changes a div's text on mouseover with "You're hovering over me!" and
on mouseout with "You left me!".
Ans. <!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>JAVASCRIPT EVENTS</TITLE>
</HEAD>
<BODY ONLOAD="onPageLoad()">
<H1>JAVASCRIPT HTML EVENTS</H1>
<P ID="demo"></P>
<H2>THE ONCHANGE EVENT</H2>
<DIV ID="mouseOverDiv" ONMOUSEOVER="mouseOverFunction()">MOUSE OVER ME!</DIV>
<H2>THE ONMOUSEOUT EVENT</H2>
<DIV ID="mouseOutDiv" ONMOUSEOUT="mouseOutFunction()">MOUSE OUT OF ME!</DIV>
<SCRIPT>
function mouseOverFunction() {
document.getElementById('mouseOverDiv').innerText = "YOU'RE HOVERING OVER
ME!";
}
function mouseOutFunction() {
Practical Work 373

