DEV Community

loading...
Cover image for Start & Stop Button using JS

Start & Stop Button using JS

iblackpanther profile image I-BLACKPANTHER ・1 min read

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.

Discussion (0)

pic
Editor guide