Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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><buttonclass="js-button">This is button 2</button><script>console.log(document.querySelector('button').innerHTML);document.querySelector('button').innerHTML='Changed 1';constbuttonElement=document.querySelector('.js-button');// classes for js are usually named 'js-...'console.log(buttonElement);</script></body>
Enter fullscreen modeExit fullscreen mode

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

<body><p>YouTube Subscribe Button</p><buttononclick="        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 modeExit 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><buttononclick="    subscribe();    "class="js-subscribe-button">Subscribe</button><script>functionsubscribe(){constbuttonElement=document.querySelector('.js-subscribe-button');if(buttonElement.innerText==='Subscribe'){buttonElement.innerHTML='Subscribed'}else{buttonElement.innerHTML='Subscribe'}}</script></body>
Enter fullscreen modeExit 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 😄

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

AI Entrepreneur, building AI Chatbot Assistants for companies and websites.
  • Location
    Zürich, Switzerland
  • Education
    University of St.Gallen, Switzerland
  • Work
    Entrepreneur
  • Joined

More fromGregor Schafroth

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp