Problems with using event handlers for button and textarea input

Fibulo · Nov 29, 2021

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

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.data-selected == true) {
    textRegex;
    textDisplay;
    concatDisplay;
}

CodeMonkeyJ · Dec 10, 2021

Full disclosure, I don't usually do web stuff. But, firstly, bttns and keys are elements, so you can't just addEventListener on them. You have to loop through them, like follows.

JavaScript:

for (b of bttns){
    b.addEventListener("click", buttonToggle);
    b.addEventListener("click", buttonLetterCheck);
    b.addEventListener("click", buttonLetterCheck);
}
for (k of keys){
    k.addEventListener("keypress, click", textRegex);
    k.addEventListener("keypress", textDisplay);
    k.addEventListener("keypress", concatDisplay);
}

Next, and this might be my noviseness, I can't tell what you're trying to do with, e.g., element.data-typed. That's just not valid syntax, it's trying to subtract element.data by typed. That goes for quite a few lines in the code. Either typed and selected aren't variables or you're trying some attributes I'm unfamiliar with. Sorry I can't be more help, I tend to avoid the front end.

Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023
Php modal form to email	1	Aug 28, 2024
Checking dynamically populated data using ajax with user entered value	5	Apr 11, 2020
action_page.php form	2	Oct 25, 2020
Problems with button control containing text and image	1	Sep 7, 2006
Problems with button control containing text and image	4	Sep 6, 2006
Using parameters with sqldatasource and mySQL	1	Aug 6, 2008
Problems with WYSIWYG.	0	Jan 9, 2004

Problems with using event handlers for button and textarea input

Fibulo

CodeMonkeyJ

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads