butiran-✗

textarea button textarea

· 2 mins read · edit

result

26b43.html

<div id="container"><div>

<script src="26b39.js"></script>
<script src="26b41.js"></script>
<script src="26b43.js"></script>

<script>
// Instantiate containers, output textarea, and buttons
const cnt = getContainer("container");
const inTxa = createTextarea("text-input");
const outTxa = createTextarea("text-output");
const btnDiv = createDiv("button-container");
const deBtn = createButton("de-button", "Default");
const owBtn = createButton("ow-button", "Overwrite");
const coBtn = createButton("co-button", "Clear output");
const ciBtn = createButton("ci-button", "Clear input");
const ppBtn = createButton("pp-button", "Pop push");

// Append textarea to container
cnt.append(inTxa);
cnt.append(btnDiv);
cnt.append(outTxa);
btnDiv.append(ciBtn);
btnDiv.append(coBtn);
btnDiv.append(deBtn);
btnDiv.append(owBtn);
btnDiv.append(ppBtn);

// Change elements flex value
changeElementsFlex(
  ["text-input", "3"],
  ["button-container", "3"] , 
  ["text-output", "3"],
);

// Bind consolex output to textarea and set EOL character
consolex.setOutput(outTxa);
consolex.setEOL("");

// Set onclick event to each button
ciBtn.addEventListener("click", () => {
  clearTextarea("text-input");
});
coBtn.addEventListener("click", () => {
  clearTextarea("text-output");
});
deBtn.addEventListener("click", () => {
  inTxa.value = "Line 1"; 
  inTxa.value += "\n" + "Line 2";
  inTxa.value += "\n" + "Line 3";
  inTxa.value += "\n" + "Line 4";
  inTxa.value += "\n" + "Line 5";
  inTxa.value += "\n" + "Line 6";
  inTxa.value += "\n" + "Line 7";
});
owBtn.addEventListener("click", () => {
  copyTextareaFromTo("text-input", "text-output");
});
ppBtn.addEventListener("click", () => {
  let inLines = inTxa.value.split("\n");
  let outLines = outTxa.value.split("\n");

  if(inLines.length == 1 && inLines[0] == "") {
    inLines = [];
  }
  if(outLines.length == 1 && outLines[0] == "") {
    outLines = [];
  }
  
  let item = "";
  if(inLines.length > 0) {
    item = inLines.pop();
  }  
  if(item.length > 0) {
    outLines.push(item);
  }
  
  inTxa.value = inLines.join("\n");
  outTxa.value = outLines.join("\n");
  
  outTxa.scrollTop = outTxa.scrollHeight;
});
</script>

26b43.js

/**
 * 26b43.js
 * Helper functions for butiran-x/26b43 note.
 *
 * Author: Sparisoma Viridi (https://github.com/dudung)
 * Created: 2026-02-18
 *
 * Exports:
 * - clearTextarea(id)
 * - copyTextareaFromTo(src, dest)
 */


/**
 * Clear content of a textarea element.
 * @param {string} id - The id of textarea element whose content to be cleared.
 * @returns {void}
 *
 * @example
 * clearTextarea("text-input");
 * clearTextarea("text-output");
 */
function clearTextarea(id) {
  /** @type {HTMLTextareaElement|null} */
  const el = document.getElementById(id);
  
  if (!(el instanceof HTMLTextAreaElement)) return null;
  
  el.value = "";
}


/**
 * Copy content from a textarea element to other textarea element and overwrite it.
 * @param {string} src - The id of textarea element whose content to be copied.
 * @param {string} dest - The id of textarea element that will have new content.
 * @returns {void}
 *
 * @example
 * CopyTextarea("text-input", "text-output");
 */
function copyTextareaFromTo(src, dest) {
  /** @type {HTMLTextareaElement|null} */
  const el1 = document.getElementById(src);
  const el2 = document.getElementById(dest);
  
  if (!(el1 instanceof HTMLTextAreaElement)) return null;
  if (!(el2 instanceof HTMLTextAreaElement)) return null;
  
  el2.value = el1.value;
}


// marker: 26b43.js
(() => {
  console.log("[marker] 26b43.js loaded");
})();