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

Question #302688

Dynamic Event Listeners

The goal of this coding exam is to quickly get you off the ground with Adding Event Listeners Dynamically.

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/adding-event-listeners-dynamically-op.gif

Resources

CSS Colors used:

Text colors Hex code values used:

#0000ff

HTML

<!DOCTYPE html>

<html>

<body>

<p>Create h1 Element dynamically by adding event listeners dynamically</p>

<button class="button" id="createBtn">Create</button>

</div>

</body>

</html>

CSS

.button {

color: #ffffff;

background-color: #0967d2;

font-size: 14px;

border-width: 0;

border-radius: 4px;

padding: 10px;

}

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .button {
            color: #ffffff;
            background-color: #0967d2;
            font-size: 14px;
            border-width: 0;
            border-radius: 4px;
            padding: 10px;
        }
    </style>
    <div id="myContainer">
        <p>Create h1 Element dynamically by adding event listeners dynamically</p>
        <button class="button" id="createBtn">Create</button>
    </div>
    <script>
        const container = document.querySelector('#myContainer'),
              btn = document.querySelector('#createBtn');
        btn.addEventListener('click', () => {
            const h1 = document.createElement('h1');
            h1.style.color = '#0000ff'
            h1.innerHTML = "Main Heading element"
            container.appendChild(h1);
        });
    </script>
</body>
</html>

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

Comments

No comments. Be the first!

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

Resources

Comments

Leave a comment

Related Questions