05.04.2018, 03:39
|
|
Новичок на форуме
|
|
Регистрация: 01.12.2017
Сообщений: 8
|
|
|
Не работает onclick
let flips = document.querySelectorAll('.flip');
onclick = (event) => {
if(flips[5] === event.target)
{
alert("hello");
}
... //другие работающие функции
}
Почему не выводится hello при клике на флипс? Ошибок никаких не показывает и просто не хочет работать, но работает с другим вариантом:
flips[5].onclick = () => {
alert('hello');
}
Оба варианта ведь должны работать, разве нет?
Последний раз редактировалось Dimasikylll, 05.04.2018 в 03:42.
|
|
05.04.2018, 03:56
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="flip">0</div>
<div class="flip">1</div>
<div class="flip">2</div>
<div class="flip">3</div>
<div class="flip">4</div>
<div class="flip">5</div>
<script>
let flips = document.querySelectorAll('.flip');
flips.forEach((el,i)=>el.onclick = (event) => {
if(i==5) alert("hello");
});
</script>
</body>
</html>
У вас обработчик на воздух навешивается? |
|
05.04.2018, 04:11
|
|
Новичок на форуме
|
|
Регистрация: 01.12.2017
Сообщений: 8
|
|
|
В первом варианте клик считывается на всех элементах и таргет указывает, на каком именно элементе клик нужен, разве нет?
|
|
05.04.2018, 10:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.09.2015
Сообщений: 117
|
|
Сообщение от Dimasikylll
|
|
В первом варианте клик считывается на всех элементах и таргет указывает, на каком именно элементе клик нужен, разве нет?
|
Вообще то не на все, а на window
Но код работает
<html>
<head>
<meta charset = "utf-8" />
<style>
</style>
</head>
<body>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<div class = "flip">flip</div>
<script>
const flips = document.querySelectorAll(".flip")
onclick = function(event){
if(flips[2] === event.target) alert(100)
}
</script>
</body>
</html>
Посмотрите, нет ли других ошибок |
|
05.04.2018, 14:13
|
|
Новичок на форуме
|
|
Регистрация: 01.12.2017
Сообщений: 8
|
|
|
Не выдаёт никаких ошибок и работает только при навешивании клика на каждый элемент, без понятия почему
|
|
05.04.2018, 14:58
|
|
Новичок на форуме
|
|
Регистрация: 01.12.2017
Сообщений: 8
|
|
|
Я не вешаю несколько обработчиков на один элемент. Либо проверяю клик через window, либо просто вешаю клик на элемент. По отдельности оба способа должны работать, но у меня работает только при навешивании клика на элемент.
|
|
05.04.2018, 15:10
|
|
Кандидат Javascript-наук
|
|
Регистрация: 19.09.2015
Сообщений: 117
|
|
То что там написано, это правда, но про "фундаментальный недостаток" автор явно погорячился, это фиксится парой строк.
С другой стороны, расхваливаемые им функции, типа addEventListener имеют свои недостатки, и они даже, по-моему, посерьезней
Так что этот способ вполне годный. Нет смысла отказываться от него. |
|
05.04.2018, 15:21
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Если что-то не получается или работает не как ожидалось, можно вывести в в консоль
onclick = event => {
console.log(event, event.target);
};
|
|
05.04.2018, 15:23
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Сообщение от sortarray
|
|
про "фундаментальный недостаток" автор явно погорячился, это фиксится парой строк.
|
Если вас не затруднит написать эти пару строк, продемонстрируйте их, пожалуйста.
|
Сообщение от sortarray
|
|
С другой стороны, расхваливаемые им функции, типа addEventListener имеют свои недостатки, и они даже, по-моему, посерьезней
|
Можете объяснить недостаток объявления обработчика этим методом?
Последний раз редактировалось Nexus, 05.04.2018 в 15:28.
|
|
|
|
