HTML: HTML: <a href="#" id="test16" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test17" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test18" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test19" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> JavaScript: Код (Javascript): window.onload = function(e){ let arrayOfThumbs = document.getElementsByClassName('preview'); } Не могу понять логику JS и соответственно решить задачу. Как я понял в начале нужно получить список элементов, которые я хочу слушать, затем нужно отловить событие и у знать по какому из элементов было событие "клик" и потом с помощью getElementsById получить тот самый ID. Подскажите, как поймать этот ID и вывести его в консоль console.log()
На чистом теоретически так Код (Text): var elements = document.getElementsByClassName("class"); elements.forEach(element => element.onclick = event => alert(event.target.id)))
Не до конца понимаю логику JS каким образом он отлавливает то или иное событие. Т.е. вот кликнул я на сайте по какому то элементу, т.е. событие произошло. Теперь мне нужно узнать в каком месте был клик (координаты), по какому элементу был совершен клик. Я вначале подумал, что все это прописывается в каком-то дереве событий и после того или иного действия/события, я просто обращаюсь к нему и спрашиваю, вот сейчас был клик, скажи где он был. А мне JS говорит, вот тут и тут. Думаю, если понять как оно работает, куда пишется и у кого спрашивать, будет проще понять язык.
Вот такое написал: script.js Код (Javascript): window.onload = function(e){ let cards = document.getElementsByClassName('preview'); Array.from(cards).forEach(function(card){ card.addEventListener('click', function(){ console.log(this.id); }) }); } index.html HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="./script.js"></script> </head> <body> <a href="#" id="test16" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test17" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test18" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> <a href="#" id="test19" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a> </body> </html> PS: вложенности функций достаточно сильно напрягают.
@AlexandrS Альтернатива без this Код (Javascript): Array.from(cards).forEach(function(card){ card.addEventListener('click', function(event){ alert(event.currentTarget.id); }) }); es6 Код (Javascript): Array.from(cards).forEach(card => card.addEventListener('click', event => alert(event.currentTarget.id))) es6 2 Код (Javascript): Array.from(cards).forEach(card => card.onclick = event => alert(event.currentTarget.id))
Благодарю! Черпаю информацию из разных источников, но не где не встречал такое нутро в forEach() Кстати не могу понять, что я упускаю, захотел это все обернуть функцией, сделал вот так: Код (Javascript): window.onload = function(e){ function getId(nameClass) { let elementsList = document.getElementsByClassName(nameClass); Array.from(elementsList).forEach(function(element){ element.addEventListener('click', function(){ let result = this.id; return result; }) }); } console.log(getId('preview')); } Но в результате получаю undefined. Что не так делаю?
Во первых ты находишься вне контекста твой return возвращает результат для this (для функции) которая не имеет ничего общего с getId пользуйся es 6 вместо function => тогда return сработает Плюс console.log не делает клика. Не понятно что ты хотел получить. Цикл просто добавляет прослушку события ничего более. А вообще нужно использовать или jquery или переходить на react etc. Что то более простое например получить список всех id писать на js одно удовольствие Код (Javascript): console.log([...cards].map(card => card.id))
Благодарю. Касаемо jQuery это к сайту нужно подключать библиотеку, вес которой зачастую в разы превышает код на чистом JS, который требуется для реализации каких-то небольших нужд. Цель была получить ID в переменную, чтоб потом значение этой переменной передать к примеру через Ajax в PHP скрипт, а сам console.log() это как визуализация результата в консоле.
Ну если хочешь прям отделить от всего кода всегда есть глобальные переменные например window.lastClickedCardId = result и с любого места можешь вызывать console.log(window.lastClickedCardId) Сам запутался вот вот так возвращаются значения с функций. Код (Text): const ids = [...cards].map(function(card) { return card.id; }) return ids
@AlexandrS Кстати ты же в курсе что можно сколько угодно кнопок создавать? На какую нажмешь та и отправится. PHP: <input type="submit" name="action" value="add"> <input type="submit" name="action" value="remove"> <input type="submit" name="action" value="block"> if($_POST["action"] === "add") {...} if($_POST["action"] === "remove") {...} if($_POST["action"] === "block") {...} Ты просто не туда копаешь. Что то нажал на форме отловил и с формой работаешь.
Я вообще в JS можно сказать ноль, имея знания в пхп, с JS работать, как то не комфортно, но хочется изучить хотя бы для реализации своих нужд. Поэтому создаю какую ни будь задачу и пытаюсь в ней разобраться и реализовать. Многие источники которые появляются в выдачи по тому или иному запросу довольно староватые, сразу определяю, если в коде var значит старье, может и не прав насчет этого, но все же определяю так ито, даже с учетом такой фильтрации не всегда актуальная информация.
let и const появились тогда же когда и => и многое другое. Оно сейчас все смешано. Ну а вообще если кнопка меняет какой то инпут то его и нужно по клику изменить если отправляет форму тогда сформировать и отправить форму от задачи зависит. Код (Javascript): $("input[name='id']").val(event.currentTarget.id)
Тут как бы вопрос не в форме, вопрос в том, чтоб за что-то зацепиться и начать с этого места раскручивать мне довольно трудно сидеть и смотреть какие-то уроки, по этой причине я задумываю задачу и с нее начинаю что-то решать. Да и в отличии от ПХП не могу уловить как JS работает, по какой логике, понимаю что все на поверхности но не могу уловить основной сути, которая прояснит большой пласт информации.
Да я не о том. Я в предыдущем сообщении задумался и глупость написал вообще интересная тема и за this в addEventListener узнал (я пользовался только target currentTarget) и за getElementsByClassName возвращает коллекцию потому Array.from(document.getElementsByClassName("class")) вот так по мелочам все и откладывается в голове