I am having problems grasping event listener functions for a series of button inputs and text inputs linked to arrays. All the functions focus on a single task and are relatively simple-- at least in conception, if not my execution.
Please find below the html for reference and the js for patchwork. I appreciate any help or tips you can provide.
Sincerely,
Jeffrey
HTML
JS
Please find below the html for reference and the js for patchwork. I appreciate any help or tips you can provide.
Sincerely,
Jeffrey
HTML
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.03.css" media="screen">
</head>
<body>
<div class="container">
<textarea class="textarea" placeholder="Type Here"></textarea>
<!--Letter Labels-->
<span class="lA">A</span>
<span class="lO">O</span>
<span class="lC">C</span>
<span class="lD">D</span>
<!--Blue Letter Selection-->
<button class="lb">Blue</button>
<button class="bA button" data-typed="A" data-regex=/[A]/ data-displayed="bA" data-selected="false">bA</button>
<button class="bO button" data-typed="O" data-regex=/[O]/ data-displayed="bO" data-selected="false">bO</button>
<button class="bC button" data-typed="C" data-regex=/[C]/ data-displayed="bC" data-selected="false">bC</button>
<button class="bD button" data-typed="D" data-regex=/[D]/ data-displayed="bD" data-selected="false">bD</button>
<!--Gold Letter Selection-->
<button class="lg">Gold</button>
<button class="gA button" data-typed="A" data-regex=/[A]/ data-displayed="gA" data-selected="false">gA</button>
<button class="gO button" data-typed="O" data-regex=/[O]/ data-displayed="gO" data-selected="false">gO</button>
<button class="gC button" data-typed="C" data-regex=/[C]/ data-displayed="gC" data-selected="false">gC</button>
<button class="gD button" data-typed="D" data-regex=/[D]/ data-displayed="gD" data-selected="false">gD</button>
<input class="concatenationarea">
</div>
<script src="test.03.js"></script>
</body>
</html>JS
JavaScript:
let bttns = document.querySelectorAll(".button").forEach();
let keys = document.getElementById("textarea").forEach();
let nucarray = []
let concatarray = []
// Toggle button select on/off
function buttonToggle(bttns) {
if (bttns.data-selected == false) {
bttns.style.classList.add('selected');
bttns.data-selected == true;
}
else if (bttns.data-selected == true) {
bttns.style.classList.remove('selected');
bttns.data-selected == false;
}
}
// Deselect prior selected buttons of the same letter
function buttonLetterCheck(element, bttns) {
if (element.data-typed == bttns.data-typed)
{ element.data-selected == false; }
else { return }
}
// Deselect prior selected vowels
function buttonVowelCheck(element, bttns) {
if (element.data - typed === "A" || bttns.data - typed === "O")
{ element.data - selected == false; }
else if (element.data - typed === "O" || bttns.data - typed === "A")
{ element.data - selected == false; }
else { return}
}
// Only allow button selected letters to be typed into the text area
function textRegex(keyPressed, bttns, event) {
allowed_chars == bttns.data-regex;
if (!allowed_chars.test(event.key)) {
event.preventDefault();;
}
else { return }
}
// Text Area Display: show array of color coded typed letters bracketed by start and end
function textDisplay(keypress) {
if (Keypressed != bttns.data-typed) {
delete (keyPressed);
}
else {
textarea.color = bttns.background-color();
nucarray.push(bttns.data - displayed);
}
textarea.value = '';
nucarray.unshift("start");
nucarray.push("end");
textarea.value = nucarray.join;
}
//Concatenation Area Display: show daisy chain mini version of the button images bracketed by start and end buttons
function concatDisplay(keypress, bttns) {
if (Keypressed != bttns.data-typed) {
delete (keyPressed);
}
else {
concatarray.push(bttns.cloneNode(true));
concatenationarea.value = '';
concatarray.unshift(".start");
concatarray.push(".end");
concatenationarea.value = concatarray.join();
}
}
bttns.addEventListener("click", bttnToggle);
bttns.addEventListener("click", bttnLetterCheck);
bttns.addEventListener("click", bttnVowelCheck);
keys.addEventListener("keypress, click", textRegex);
keys.addEventListener("keypress", textDisplay);
keys.addEventListener("keypress", concatDisplay);
buttonToggle;
buttonLetterCheck;
buttonVowelCheck;
if (bttns.selected == true) {
textRegex;
textDisplay;
concatDisplay;
}
