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>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>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>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)
For further actions, you may consider blocking this person and/orreporting abuse
