Как назначить группе кнопок функцию с помощью onclick;

Я просто пытаюсь назначить одну и ту же функцию нескольким кнопкам. У меня возникли проблемы со ссылкой на кнопки, я столкнулся с «querySelectorAll не является функцией» и то же самое для getElementByClass, но с текущим кодом он ссылается на что-то, потому что функция работает, но только при загрузке, а не при нажатии.

Вот код:

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.info("fghjk")
}

Выполнение isLetterThere() вызывает вашу функцию isLetterThere, устанавливая результат вызова (undefined) в onClick. Скорее всего, вы хотели (хотя и в плохом стиле) keys.onClick = isLetterThere, который бы назначал функцию onClick и позволял вызывать ее через onClick(). Согласно ответу ниже, это все еще уступает addEventListener.

— 24.04.2024 17:54

javascript function

24.04.2024 17:03

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

В вашем коде keys = document.querySelectorAll(".keys"); это возвращает коллекцию. Итак, вам нужно перебрать эту коллекцию и добавить событие к каждому элементу.

Вы можете сделать двумя способами. Либо вы можете добавить addEventListener при создании кнопки.

В качестве альтернативы вы также можете добавить событие, используя querySelectorAll, который вернет цикл NodeList then коллекции и добавит к нему событие.

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.info("fghjk")
}

function testAlternative() {
  console.info("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>

24.04.2024 17:16

Key - это объект, подобный массиву, у него нет ни onclick, ни onClick, поэтому присвоение результата isLetterThere() приведет к выполнению функции один раз и присвоению ее результата объекту, подобному массиву, вместо вашего намерения создать щелчок обработчик для каждой буквы-кнопки. Итак, для достижения цели вам нужно будет добавить к элементам обработчики кликов, например 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.info("fghjk")
}

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

24.04.2024 17:21

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