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.
sample screenshot:
Solution:
index.html
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, td{
border: 1px solid black;
}
</style>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<h1>Elite Coaching Center</h1>
<table>
<tr>
<td><label for="studentName">Student Name</label></td>
<td><input type="text" id="sname" required></td>
</tr>
<tr>
<td>
<label for="course">Course</label>
</td>
<td>
<select name="course" id="course" required>
<option value="Python">Python</option>
<option value="Java">Java</option>
<option value="Oracle">Oracle</option>
</select>
</td>
</tr>
</table>
<input type="button" name="submit" id="submit" value="Register" onclick="display()">
<div id="greet"></div>
</body>
</html>
__________________________________________________________________
script.js
function display(){
var name=document.getElementById('sname').value;
var subject=document.getElementById('course').value;
if(name===""){
document.getElementById('greet').innerHTML="Name cannot be empty";
}
else{
document.getElementById('greet').innerHTML="Hi, "+name+". You have successfully registered for the "+subject+" course."
}
}
