Task using OOPS & DOM in JS

Task using OOPS & DOM in JS

Task for HTML

  1. Create a empty div with class name result
  2. Create a button with class name btn and apply onclick event here with output function

Task for DOM

  1. Find the above result and btn class using query selector method

Task for OOPS

  1. Create a class with name Demo that contain 2 function with person and welcome name
  2. Create Person function with 3 arguments name, age and city.
  3. Write a code in Welcome function to display name , age and city data using innerHTML on result div.
  4. Create object for the demo class with name d.
  5. Last, call the above both function person and welcome through this object in output function.


<!DOCTYPE html>

<html lang=”en”>


                        <meta charset=”UTF-8″ />



                        <div class=”result”></div>

                        <button class=”btn” onclick=”res()”>CLICK HERE</button>


                                    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.Person(“kalra”, 30, “Delhi”);






Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *