Answer to Question #302819 in HTML/JavaScript Web Application for chethan

Question

Answer to Question #302819 in HTML/JavaScript Web Application for chethan

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #302819

All syntaxes of Event Listeners

The goal of this coding exam is to quickly get you off the ground with All Syntaxes Of Event Listeners

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/all-syntaxes-of-event-listeners-op.gif

Achieve the given functionality using JS

When the HTML Button with Inline event listener is clicked
Text content in the HTML paragraph element with id messageshould be displayed as "Inline event listener".
The content of paragraph element should be updated using javascript Inline event listener.
When the HTML button with id onEventListenerBtn is clicked
Text content in the HTML paragraph element with id messageshould be displayed as "onevent listener".
The content of paragraph element should be updated using javascript onevent listener.
When the HTML button with id addEventListenerBtn is clicked
Text content in the HTML paragraph element with id messageshould be displayed as "addEventListener".

Expert's answer

<!DOCTYPE html>
<html lang="en">
<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>
    button {
      display: block;
      margin-top: 5px;
    }
    #inlineListenerBtn {
      background-color: blue;
    }
    #onEventListenerBtn {
      background-color: gray;
    }
    #addEventListenerBtn {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p id="message"></p>
  <button id="inlineListenerBtn" onclick="inlineClick()">Button with Inline event listener</button>
  <button id="onEventListenerBtn">Button with onevent listener</button>
  <button id="addEventListenerBtn">Button with addEventListener</button>
  <script>
    var p = document.getElementById("message");
    
    function inlineClick() {
      p.innerHTML = "Inline event listener";
    }


    var btn2 = document.getElementById("onEventListenerBtn")
    btn2.onclick = onEventClick;
    function onEventClick() {
      console.log("22")
      p.innerHTML = "onevent listener";
    }


    var btn3 = document.getElementById("addEventListenerBtn");
    btn3.addEventListener("click", function() {
      console.log("33");
      p.innerHTML = "addEventListener";
    });


  </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #302819 in HTML/JavaScript Web Application for chethan

Comments

Leave a comment

Related Questions