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.
Top comments (0)