Task using OOPS & DOM in JS
Task for HTML
- Create a empty div with class name result
- Create a button with class name btn and apply onclick event here with output function
Task for DOM
- Find the above result and btn class using query selector method
Task for OOPS
- Create a class with name Demo that contain 2 function with person and welcome name
- Create Person function with 3 arguments name, age and city.
- Write a code in Welcome function to display name , age and city data using innerHTML on result div.
- Create object for the demo class with name d.
- Last, call the above both function person and welcome through this object in output function.
Solution
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
</head>
<body>
<div class=”result”></div>
<button class=”btn” onclick=”res()”>CLICK HERE</button>
<script>
let btn = document.querySelector(“.btn”);
let result = document.querySelector(“.result”);
class Demo
{
Person(name, age, city) {
this.name = name;
this.age = age;
this.city = city;
}
welcome() {
result.innerHTML += ” Welcome “+this.name+” age: “+this.age +” city: “+this.city+”<br>”;
}
}
let d = new Demo();
function output()
{
d.Person(“shairy”, 32, “Ludhiana”);
d.welcome();
d.Person(“kalra”, 30, “Delhi”);
d.welcome();
}
</script>
</body>
</html>