DEV Community

Cover image for 🟨 Daily Code 37 | The Document Object Model (DOM) 2
Gregor Schafroth
Gregor Schafroth

Posted on

🟨 Daily Code 37 | The Document Object Model (DOM) 2

Today I’m continued with the DOM chapter in the 📺 SuperSimpleDev JavaScript Tutorial on YouTube. Lets go!! 🔥👨‍💻🟨

My Code

If there are several buttons but I only want to edit some, I can use classes.

💡 Useful: the naming convention for these classes is ‘js-…’ if they are used for JavaScript

<body>
    <button>This is button 1</button>
    <button class="js-button">This is button 2</button> 
    <script>
        console.log(document.querySelector('button').innerHTML);
        document.querySelector('button').innerHTML = 'Changed 1';

        const buttonElement = document.querySelector('.js-button'); // classes for js are usually named 'js-...'
        console.log(buttonElement);
    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Now here is a button that can change back and forth with JavaScript

<body>
    <p>YouTube Subscribe Button</p>
    <button onclick="
        const buttonElement = document.querySelector('.js-subscribe-button');

        if (buttonElement.innerText === 'Subscribe')  {
            buttonElement.innerHTML = 'Subscribed'
        } else {
            buttonElement.innerHTML = 'Subscribe'
        }
    " class="js-subscribe-button">Subscribe</button>
</body>
Enter fullscreen mode Exit fullscreen mode

But this is not very clean since HTML and JS is mixed up, so let’s separate that out with a function. (to my understanding this is still not separated as much as it should be, but perhaps that comes up later in the course)

<body>
    <p>YouTube Subscribe Button</p>
    <button onclick="
    subscribe();
    " class="js-subscribe-button">Subscribe</button>
    <script>
        function subscribe() {
            const buttonElement = document.querySelector('.js-subscribe-button');
            if (buttonElement.innerText === 'Subscribe') {
                buttonElement.innerHTML = 'Subscribed'
            } else {
                buttonElement.innerHTML = 'Subscribe'
            }
        }

    </script>
</body>
Enter fullscreen mode Exit fullscreen mode

Alright that’s it again for today. Tomorrow I’ll upgrade the Rock Paper Scissors game from a few days ago with the newly learned code 😄

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay