butiran

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

  1. Open a plain text editor, e.g. vim, nano, Notepad++, VS Code.
  2. Copy and paste code given above.
  3. Save with new name, e.g. jstu-04-button-label.html.
  4. View using an internet browser, e.g. Google Chrome, Mozilla Firefox, Apple Safari.
  5. Edit HTML file for further modification.
  6. Save the changes
  7. Refresh internet browser to see updated result.
  8. Repeat the previous three steps (5-7).
  9. Close the internet browser.
  10. Close the plain text editor.