DEV Community

Cover image for Start & Stop Button using JS

Posted on


Start & Stop Button using JS

Button Start & Stop Command


    <button class="button">Start Machine</button>
    <p>The Machine is stopped</p>
    <script src="Start & Stop Button/script.js"></script>

Note: In HTML document we must link style sheet as well


The JS code is quite simple as we are grabbing the button and paragraph using querySelector and adding a event listner to that button => event listner can be click There are several Mouse Event functions which can be used here.

const btn = document.querySelector("button");
const txt = document.querySelector("p");

btn.addEventListener("click", updateBtn);

function updateBtn() {
    if (btn.textContent === "Start Machine") {
        btn.textContent = "Stop Machine";
        txt.textContent = "The Machine has Started";
    } else {
        btn.textContent = "Start Machine";
        txt.textContent = "The Machine is Stopped";


I have not implemented too much CSS functions here as i want to show my idea of implementing a function on Click of a button.

.button {
    width: 200px;
    border: 2px solid green;
    text-align: center;
    text-decoration: none;
    display: inline;

If you want to see it "in live" and "download" the "Source Code", this is the link to my GitHub profile.

Thank your for watching!🙋 . If you Like it hit that like Button.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await