// Get a reference to an element
const myElement = document.getElementById('myToggleElement');

if (myElement) {
    // Toggle a CSS class on click
    myElement.addEventListener('click', () => {
        myElement.classList.toggle('active');
        console.log('Class "active" toggled. Current classes:', myElement.className);

        // Apply or remove inline style based on class presence
        if (myElement.classList.contains('active')) {
            myElement.style.backgroundColor = '#e0ffe0';
            myElement.style.fontWeight = 'bold';
            console.log('Inline styles applied.');
        } else {
            myElement.style.backgroundColor = ''; // Remove inline style
            myElement.style.fontWeight = '';     // Remove inline style
            console.log('Inline styles removed.');
        }
    });

    console.log('Click handler attached to element:', myElement);
} else {
    console.error('Element with ID "myToggleElement" not found.');
}

/*
HTML structure for testing:
<div id="myToggleElement" style="padding: 10px; border: 1px solid #ccc; cursor: pointer;">
    Click to toggle class and styles
</div>
<style>
    .active {
        border-color: green;
        box-shadow: 0 0 5px green;
    }
</style>
*/