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");
})();