Javascript - How to assign a group of buttons a function with onclick;

ell
April 24, 2024
160 views
3 votes
3 Answers

Am just trying to assign the same function to a bunch of buttons. I was having trouble referencing the buttons, I ran into "querySelectorAll is not a function" and same for getElementByClass, but with the current code it’s referencing something because the function works, but only on load and not on click.

Here’s the code:

let key;
let text;
let keys;

let alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
for(let i = 0; i < alphabet.length; i++){
key = alphabet[i] + "Key";
text = document.createTextNode(alphabet[i].toUpperCase());
key = document.createElement("button");
key.appendChild(text);
key.classList.add("keys");
keyboard.append(key);
    }
keys = document.querySelectorAll(".keys");
keys.onClick = isLetterThere();

}

function isLetterThere(){
console.log("fghjk")
}

Tags: function javascript

Answers

In you code keys = document.querySelectorAll(".keys"); this returns a collection. So you need to iterate this collection and add event to each of the element

You can do in two ways. Either you can add the addEventListener when you create the button.

Alternatively you can also add the event using querySelectorAll which will return a NodeList then loop of the collection and add event to it

let key;
let text;
let keys;
let keyboard = document.getElementById('keyboard')
let alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];

function isLetterThere() {
  console.log("fghjk")
}

function testAlternative() {
  console.log("testAlternative")
}

for (let i = 0; i < alphabet.length; i++) {
  key = alphabet[i] + "Key";
  text = document.createTextNode(alphabet[i].toUpperCase());
  key = document.createElement("button");
  key.appendChild(text);
  key.classList.add("keys");
  key.addEventListener('click', isLetterThere);
  keyboard.append(key);
}
document.querySelectorAll('.keys').forEach(elem => elem.addEventListener('click', testAlternative));

<div id='keyboard'></div>

Key’s is an array-like-object, it does not have an onclick, nor an onClick, so assigning the result of isLetterThere() will execute the function once and assign its result to the array-like object, instead of your intention of creating a click handler for each letter-button. So, to achieve your goal, you will need to add click handlers to the elements, like key.addEventListener("click", isLetterThere)

let key;
let text;
let keys;
let keyboard = document.getElementById("keyboard");

let alphabet = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
for(let i = 0; i < alphabet.length; i++){
    key = alphabet[i] + "Key";
    text = document.createTextNode(alphabet[i].toUpperCase());
    key = document.createElement("button");
    key.appendChild(text);
    key.classList.add("keys");
    keyboard.append(key);
    key.addEventListener("click", isLetterThere);
}
keys = document.querySelectorAll(".keys");
//keys.onClick = isLetterThere();


function isLetterThere(){
    console.log("fghjk")
}

<div id="keyboard"></div>

const alphabet = "abcdefghijklmnopqrstuvwxyz";
const keyboard = document.getElementById("keyboard"); // Assuming you have a div with id "keyboard" to append buttons to

alphabet.split("").forEach(letter => {
    const key = document.createElement("button");
    key.textContent = letter.toUpperCase();
    key.classList.add("keys");
    key.addEventListener("click", isLetterThere);
    keyboard.appendChild(key);
});

function isLetterThere() {
    console.log("fghjk");
}

<div id="keyboard"></div>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – How to assign a group of buttons a function with onclick;

Answers