За последние 24 часа нас посетил 20161 программист и 1078 роботов. Сейчас ищет 771 программист ...

Получить ID элемента

Тема в разделе "JavaScript и AJAX", создана пользователем AlexandrS, 20 сен 2018.

  1. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    HTML:
    HTML:
    1.  
    2. <a href="#" id="test16" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    3. <a href="#" id="test17" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    4. <a href="#" id="test18" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    5. <a href="#" id="test19" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    6.  
    JavaScript:
    Код (Javascript):
    1. window.onload = function(e){
    2.  
    3.     let arrayOfThumbs = document.getElementsByClassName('preview');
    4.  
    5. }
    Не могу понять логику JS и соответственно решить задачу.
    Как я понял в начале нужно получить список элементов, которые я хочу слушать, затем нужно отловить событие и у знать по какому из элементов было событие "клик" и потом с помощью getElementsById получить тот самый ID.
    Подскажите, как поймать этот ID и вывести его в консоль console.log()
     
  2. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Код (Text):
    1. $(".class").on("click", event => alert(event.target.id))
     
    AlexandrS нравится это.
  3. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    это jQuery?
     
  4. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    На чистом теоретически так
    Код (Text):
    1. var elements = document.getElementsByClassName("class");
    2. elements.forEach(element => element.onclick = event => alert(event.target.id)))
     
    AlexandrS нравится это.
  5. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Не до конца понимаю логику JS каким образом он отлавливает то или иное событие.
    Т.е. вот кликнул я на сайте по какому то элементу, т.е. событие произошло.
    Теперь мне нужно узнать в каком месте был клик (координаты), по какому элементу был совершен клик.
    Я вначале подумал, что все это прописывается в каком-то дереве событий и после того или иного действия/события, я просто обращаюсь к нему и спрашиваю, вот сейчас был клик, скажи где он был. А мне JS говорит, вот тут и тут.
    Думаю, если понять как оно работает, куда пишется и у кого спрашивать, будет проще понять язык.
     
  6. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    AlexandrS нравится это.
  7. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Вот такое написал:

    script.js
    Код (Javascript):
    1. window.onload = function(e){
    2.  
    3. let cards = document.getElementsByClassName('preview');
    4.  
    5. Array.from(cards).forEach(function(card){
    6.     card.addEventListener('click', function(){
    7.         console.log(this.id);
    8.     })
    9.  
    10. });
    11.  
    12.  
    13. }
    index.html
    HTML:
    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <meta charset="UTF-8">
    4.     <title>Document</title>
    5.     <script type="text/javascript" src="./script.js"></script>
    6. </head>
    7.     <a href="#" id="test16" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    8.     <a href="#" id="test17" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    9.     <a href="#" id="test18" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    10.     <a href="#" id="test19" class="preview"><img src="./images/img.png" alt="..."><p>description</p></a>
    11. </body>
    12. </html>
    PS: вложенности функций достаточно сильно напрягают. :confused:
     
    #7 AlexandrS, 21 сен 2018
    Последнее редактирование: 21 сен 2018
  8. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    @AlexandrS
    Альтернатива без this
    Код (Javascript):
    1. Array.from(cards).forEach(function(card){
    2.     card.addEventListener('click', function(event){
    3.         alert(event.currentTarget.id);
    4.     })
    5. });
    es6
    Код (Javascript):
    1. Array.from(cards).forEach(card => card.addEventListener('click', event => alert(event.currentTarget.id)))
    es6 2
    Код (Javascript):
    1. Array.from(cards).forEach(card => card.onclick = event => alert(event.currentTarget.id))
     
    AlexandrS нравится это.
  9. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Благодарю! Черпаю информацию из разных источников, но не где не встречал такое нутро в forEach() :)

    Кстати не могу понять, что я упускаю, захотел это все обернуть функцией, сделал вот так:

    Код (Javascript):
    1. window.onload = function(e){
    2.  
    3. function getId(nameClass) {
    4.    
    5.     let elementsList = document.getElementsByClassName(nameClass);
    6.  
    7.     Array.from(elementsList).forEach(function(element){
    8.         element.addEventListener('click', function(){
    9.  
    10.             let result = this.id;
    11.             return result;
    12.  
    13.         })
    14.     });
    15.  
    16. }
    17.  
    18. console.log(getId('preview'));
    19.  
    20. }
    Но в результате получаю undefined.
    Что не так делаю? o_O
     
  10. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Во первых ты находишься вне контекста твой return возвращает результат для this (для функции) которая не имеет ничего общего с getId пользуйся es 6 вместо function => тогда return сработает
    Плюс console.log не делает клика. Не понятно что ты хотел получить. Цикл просто добавляет прослушку события ничего более.
    А вообще нужно использовать или jquery или переходить на react etc. Что то более простое например получить список всех id писать на js одно удовольствие
    Код (Javascript):
    1. console.log([...cards].map(card => card.id))
     
    AlexandrS нравится это.
  11. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Благодарю.
    Касаемо jQuery это к сайту нужно подключать библиотеку, вес которой зачастую в разы превышает код на чистом JS, который требуется для реализации каких-то небольших нужд.
    Цель была получить ID в переменную, чтоб потом значение этой переменной передать к примеру через Ajax в PHP скрипт, а сам console.log() это как визуализация результата в консоле.
     
  12. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Ну если хочешь прям отделить от всего кода всегда есть глобальные переменные например window.lastClickedCardId = result и с любого места можешь вызывать console.log(window.lastClickedCardId)
    Сам запутался вот вот так возвращаются значения с функций.
    Код (Text):
    1. const ids = [...cards].map(function(card) { return card.id; })
    2. return ids
     
    AlexandrS нравится это.
  13. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    @AlexandrS
    Кстати ты же в курсе что можно сколько угодно кнопок создавать? На какую нажмешь та и отправится.
    PHP:
    1. <input type="submit" name="action" value="add">
    2. <input type="submit" name="action" value="remove">
    3. <input type="submit" name="action" value="block">
    4. if($_POST["action"] === "add") {...}
    5. if($_POST["action"] === "remove") {...}
    6. if($_POST["action"] === "block") {...}
    Ты просто не туда копаешь. Что то нажал на форме отловил и с формой работаешь.
     
    AlexandrS нравится это.
  14. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Я вообще в JS можно сказать ноль, имея знания в пхп, с JS работать, как то не комфортно, но хочется изучить хотя бы для реализации своих нужд. Поэтому создаю какую ни будь задачу и пытаюсь в ней разобраться и реализовать. Многие источники которые появляются в выдачи по тому или иному запросу довольно староватые, сразу определяю, если в коде var значит старье, может и не прав насчет этого, но все же определяю так ито, даже с учетом такой фильтрации не всегда актуальная информация.
     
  15. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    let и const появились тогда же когда и => и многое другое. Оно сейчас все смешано.
    Ну а вообще если кнопка меняет какой то инпут то его и нужно по клику изменить если отправляет форму тогда сформировать и отправить форму от задачи зависит.
    Код (Javascript):
    1. $("input[name='id']").val(event.currentTarget.id)
     
    AlexandrS нравится это.
  16. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Тут как бы вопрос не в форме, вопрос в том, чтоб за что-то зацепиться и начать с этого места раскручивать мне довольно трудно сидеть и смотреть какие-то уроки, по этой причине я задумываю задачу и с нее начинаю что-то решать. Да и в отличии от ПХП не могу уловить как JS работает, по какой логике, понимаю что все на поверхности но не могу уловить основной сути, которая прояснит большой пласт информации.
     
  17. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    @AlexandrS вцепись за реакт сможешь и моб приложения делать и синтаксис там везде новый
     
    AlexandrS нравится это.
  18. AlexandrS

    AlexandrS Активный пользователь

    С нами с:
    30 сен 2017
    Сообщения:
    659
    Симпатии:
    103
    Адрес:
    Краснодар
    Благодарю за информацию!
     
  19. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    AlexandrS нравится это.
  20. keren

    keren Новичок

    С нами с:
    15 ноя 2017
    Сообщения:
    513
    Симпатии:
    42
    Да нормально и так:
    Код (Javascript):
    1. return [...cards].map(card => card.id);
     
  21. keren

    keren Новичок

    С нами с:
    15 ноя 2017
    Сообщения:
    513
    Симпатии:
    42
    Тут forEach напрямую не будет работать, можно использовать querySelectorAll
     
  22. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    Да я не о том. Я в предыдущем сообщении задумался и глупость написал вообще интересная тема и за this в addEventListener узнал (я пользовался только target currentTarget) и за
    getElementsByClassName возвращает коллекцию потому Array.from(document.getElementsByClassName("class")) вот так по мелочам все и откладывается в голове