Answer to Question #309321 in HTML/JavaScript Web Application for king

Question

Answer to Question #309321 in HTML/JavaScript Web Application for king

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #309321

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

HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Button with Inline event listener

</button>

Button with onevent listener

</button>

Button with addEventListener

</button>

</div>

</body>

</html>

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="text-center">
        <p class="message-text" id="message"></p>
        <button onclick="inlineEventListener()" class="btn-primary mb-3">
            Button with Inline event listener
        </button>
        <button id="onEventListenerBtn" class="btn-secondary mb-3">
            Button with onevent listener
        </button>
        <button id="addEventListenerBtn" class="btn-warning mb-3">
            Button with addEventListener
        </button>
    </div>


    <style>
        .text-center {
            display: flex;
            flex-direction: column;
            max-width: 250px;
            margin: 0 auto;
        }
        .message-text {
            min-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: 500;
        }
        button {
            outline: none;
            border: none;
        }
    </style>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let msg = document.getElementById('message');
        let onEventListenerBtn = document.getElementById('onEventListenerBtn');
        let addEventListenerBtn = document.getElementById('addEventListenerBtn');


        function inlineEventListener() {
            msg.innerText = 'Inline event listener';
        }


        onEventListenerBtn.onclick = () => {
            msg.innerText = 'onevent listener';
        }


        addEventListenerBtn.addEventListener('click', () => {
            msg.innerText = 'addEventListener';
        })
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

Answer to Question #309321 in HTML/JavaScript Web Application for king

Comments

Leave a comment

Related Questions