butiran

buttons in div js

· 1 min read · edit

result

code

<div id="container">
</div>

<script>
  // define functions
  function createSquareButton(size, caption) {
    let btn = document.createElement("button");
    btn.style.width = size;
    btn.style.height = size;
    //btn.style.display = "inline-block";
    btn.innerHTML = caption;
    //btn.style.borderRadius = "6px";
    btn.style.margin = "0px 2px"
    return btn;
  }
  
  // get container element, set style
  let cnt = document.getElementById("container");
  cnt.style.marginTop = "1em";
  
  // create div a wrapper
  let wrapDiv = document.createElement("div");
  wrapDiv.style.border = "0px solid red";
  wrapDiv.style.width = "87px";
  wrapDiv.style.height = "87px";
  
  // create other divs
  let btn1 = createSquareButton("25px", "1");
  let btn2 = createSquareButton("25px", "2");
  let btn3 = createSquareButton("25px", "3");
  let btn4 = createSquareButton("25px", "4");
  let btn5 = createSquareButton("25px", "5");
  let btn6 = createSquareButton("25px", "6");
  let btn7 = createSquareButton("25px", "7");
  let btn8 = createSquareButton("25px", "8");
  let btn9 = createSquareButton("25px", "9");
  
  // append elements to the parents
  wrapDiv.append(btn1);
  wrapDiv.append(btn2);
  wrapDiv.append(btn3);
  wrapDiv.append(btn4);
  wrapDiv.append(btn5);
  wrapDiv.append(btn6);
  wrapDiv.append(btn7);
  wrapDiv.append(btn8);
  wrapDiv.append(btn9);
  cnt.append(wrapDiv);
</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-08-buttons-in-div.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.