button label js
·
1 min read
·
edit
result
code
<div id="container">
</div>
<script>
// get container object
let cnt = document.getElementById("container");
// create counter
let counter = 0;
// create button element, set value and style
let btn = document.createElement("button");
btn.innerHTML = "Add 1";
btn.style.display = "inline-block";
btn.style.marginTop = "1em";
btn.style.padding = "0.6em";
// create label element, set value and style
let lab = document.createElement("label");
lab.innerHTML = counter;
lab.style.display = "inline-block";
lab.style.marginLeft = "1em";
// create event handler
function increaseCounter() {
counter += 1;
lab.innerHTML = counter;
}
// attach handler to button click event
btn.addEventListener("click", increaseCounter);
// append elements to container
cnt.append(btn);
cnt.append(lab);
</script>
steps
- Open a plain text editor, e.g. vim, nano, Notepad++, VS Code.
- Copy and paste code given above.
- Save with new name, e.g.
jstu-04-button-label.html. - View using an internet browser, e.g. Google Chrome, Mozilla Firefox, Apple Safari.
- Edit HTML file for further modification.
- Save the changes
- Refresh internet browser to see updated result.
- Repeat the previous three steps (5-7).
- Close the internet browser.
- Close the plain text editor.