DEV Community

Cover image for Start & Stop Button using JS
I-BLACKPANTHER
I-BLACKPANTHER

Posted on

2 2

Start & Stop Button using JS

Button Start & Stop Command

HTML

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

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

JavaScript

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";
    }
}

CSS

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.

https://github.com/I-BLACKPANTHER

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay