script.js

// A common pattern is to wait for the entire HTML document to load before running JS.
document.addEventListener('DOMContentLoaded', function() {
    
    // 1. Get references to the HTML elements using their IDs
    const button = document.getElementById('myButton');
    const messageParagraph = document.getElementById('message');

    // 2. Define the function that will run when the button is clicked
    function changeText() {
        messageParagraph.textContent = "🥳 The text has been successfully changed by JavaScript!";
        
        // Optional: Disable the button after one click
        button.disabled = true;
        button.textContent = "Clicked!";
    }

    // 3. Attach the function to the button's click event
    button.addEventListener('click', changeText);
});