Scribd
Upload
26 views

8th Css

The document discusses different JavaScript events like onload, onchange, oncolorchange, onkeyup, onsubmit and onreset. It provides code examples to demonstrate handling each of these events and shows the output.

Uploaded by

Ganesh Ekambe
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

8th Css

The document discusses different JavaScript events like onload, onchange, oncolorchange, onkeyup, onsubmit and onreset. It provides code examples to demonstrate handling each of these events and shows the output.

Uploaded by

Ganesh Ekambe
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

Code.
1. Onload Events

<html>
<head>Javascript Events</head>
</br>
<body onload="window.alert('Page successfully loaded');">
<script>
document.write("The page is loaded successfully");
</script>
</body>
</html>

Output
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

2. On Change :

<!DOCTYPE html>
<html>
<body>
<p>Select a new car from the list.</p>
<select id="mySelect" onchange="myFunction()">
<option value="Audi">Audi</option>
<option value="BMW">BMW</option>
<option value="Mercedes">Mercedes</option>
<option value="Volvo">Volvo</option>
</select>
<p>When you select a new car, a function is triggered which outputs the value
of the selected car.</p>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
</script>
</body>
</html>

Output
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

3. On color change

<!DOCTYPE html>
<html>
<head>
<h1> Color change</h1>
<style>
input[type="radio"] {
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
width: 200px;
}
</style>
</head>
<body>
<h1>Choose a Color:</h1>
<form>
<label><input type="radio" name="color" value="red"> Red</label>
<label><input type="radio" name="color" value="green"> Green</label>
<label><input type="radio" name="color" value="blue"> Blue</label>
</form>
<br>
<input type="text" id="colorInput" placeholder="Type something...">

<script>
// Get references to the radio buttons and the text input
const redRadio = document.querySelector('input[value="red"]');
const greenRadio = document.querySelector('input[value="green"]');
const blueRadio = document.querySelector('input[value="blue"]');
const colorInput = document.getElementById('colorInput');

redRadio.addEventListener('change', function() {
if (this.checked) {
colorInput.style.backgroundColor = 'red';
}
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

});

greenRadio.addEventListener('change', function() {
if (this.checked) {
colorInput.style.backgroundColor = 'green';
}
});

blueRadio.addEventListener('change', function() {
if (this.checked) {
colorInput.style.backgroundColor = 'blue';
}
});
</script>
</body>
</html>

Output

4. Key up
<!DOCTYPE html>
<html>
<head>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

<title> keyup function in javascript </title>


<style>
#datas {
color: green;
}
</style>
</head>
<body>
<h2> JavaScript keyup Method </h2>
<div id = "demoDIV" >
The javascript keyup event works after pressing the key and key in the
up position on the specific tag.
</div>
<input type = "text" id = "key_class" placeholder = "write here."
onkeyup = "keyUpFunction()">
<p id = "datas"> </p>
<script>
function keyUpFunction() {
alert("JavaScript keyUp function activates successfully!!!");
document.getElementById("datas").innerHTML = "JavaScript keyUp
function activates successfully!!!";
}
</script>
</body>
</html>
Output

5. Onsubmit and onreset

<!DOCTYPE html>
<html>
Client side Scripting Language (22519)

Name of Student: Ekambe Ganesh Roll No.: 53


Practical No. 08

<head>
<title>Form Events</title>
<script>

function handleSubmit(event) {
event.preventDefault();
alert('Form submitted!');
}
function handleReset() {
alert('Form reset!');
}
</script>
</head>
<body>
<form onsubmit="handleSubmit(event)" onreset="handleReset()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output

You might also like