Greetings - DOM
Create a simple web page that collects students' details and greets them.
- Add an input component for entering the student name : of type text with id "sname" and make it a mandatory field.
- Add a dropdown component for course selection : with id "course" and option values "Python", "Java" & "Oracle". Make this selection too mandatory.
- Add a button type component with id "submit" and value "Register".
- Add an empty div tag with id "greet" within the paragraph tag.
- When you click on the Register button, javascript function must get invoked & the greeting must get displayed at div (refer to the console output)
- Handle the scenario where the student name field is left empty - by referring to the console output.
Include a function called display() inside the script.js file and display the result on the web page using .innerHTML.
Note: Include script.js in the html file. Use the same function name & component ids as mentioned in the description.
ANSWER:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Students Details</title>
</head>
<body>
<h1>Elite Coaching Center</h1> <table border="1px solid black">
<tr>
<td>Student Name</td>
<td colspan="2"><input type="text" id="sname" required></td>
</tr>
<tr>
<td>Course</td> <td colspan="2">
<select id="course" required> <option value="Python">Python</option>
<option value="Java">Java</option> <option value="Oracle">Oracle</option>
</select>
</td>
</table><br>
<input type="button" id="submit" value="Register" onclick="display()"><br><br>
<div id="greet"></div>
<script src="script.js" type="text/javascript"></script>
</body> </html>
script.js
function display() {
var name = document.getElementById("sname").value;
var course = document.getElementById("course").value;
if (name !== "") {
document.getElementById("greet").innerHTML = "Hi, " +name+ ". You have successfully registered for the " +course+ "course.";
}
else {
document.getElementById("greet").innerHTML = "Name cannot be empty";
}
}
No comments:
Post a Comment