How to choose class / id using JS?

Question

I started to retrain from jQuery to JS and this is more difficult than it seemed.
Here is my standard jQuery code:

 function planeChoose() { $('.primary_search .dollar').on('click', function(e) { e.preventDefault(); var tarGet = $('.primary_search .flight_type'); if (!tarGet.hasClass('pop_up_flight')) { tarGet.addClass('pop_up_flight'); } else { tarGet.removeClass('pop_up_flight'); } }); $('.hotel .dollar').on('click', function(e) { e.preventDefault(); var tarGet = $('.hotel .flight_type_hotel'); if (!tarGet.hasClass('pop_up_flight_hotel')) { tarGet.addClass('pop_up_flight_hotel'); } else { tarGet.removeClass('pop_up_flight_hotel'); } }) }

Can you rewrite it to JS , please?
So that I could take it as a guide.

What have you tried to do? What exactly does not work? - Dmitriy Simushev

Andrei Katalkin Andrei Katalkin 743 3 7 · Accepted Answer · 2016-04-29T13:27:18

 <div class="primary_search"> <div class="flight_type"></div> <a class="dollar" href="#">$</a> </div> <div class="hotel"> <div class="flight_type_hotel"></div> <a class="dollar" href="#">$</a> </div> <script> document.querySelector('.primary_search .dollar').addEventListener('click', function(e) { e.preventDefault(); var tarGet = document.querySelector('.primary_search .flight_type'); tarGet.classList.toggle('pop_up_flight'); }); document.querySelector('.hotel .dollar').addEventListener('click', function(e) { e.preventDefault(); var tarGet = document.querySelector('.hotel .flight_type_hotel'); tarGet.classList.toggle('pop_up_flight_hotel'); }); </script>

Thank you very much, you are helping for the second time) - Nikita Shchypylov

Christian galliano christian galliano nineteen 3 · Answer 2 · 2016-04-29T13:27:01

To get an element using id use getElementById on the document object.

document.getElementById('emenent_id') .

To get an element using a class, use getElementsByClassName on the document object.

document.getElementsByClassName('emenent_class-name') .

https://learn.javascript.ru/searching-elements-dom

Answer 3 · 2016-04-29T13:33:33

Take a good JS tutorial as a reference point - it will be much better.

 function planeChoose(){ // document.querySelectorAll - ищет все элементы по селектору, правда в jQuery есть уникальные селекторs, типа :contains // Array.from - найденные элементы возвращаются как объект NodeList, для удобства превращаем их в массив // Array.forEach - перебирает массив // Element.addEventListener - вешает обработчик на событие Array.from(document.querySelectorAll('.primary_search .dollar')).forEach(e => e.addEventListener('click', tmp1)); function tmp1(e) { let tmp = null; e.preventDefault(); // document.querySelector - возвращает только один элемент по селектору, судя по коду именно один и должен находится // classList.toggle - переключает класс: если он есть, то убирает, отсутствует - назначает ((tmp = document.querySelector('.primary_search .flight_type')) !== null && tmp.classList.toggle('pop_up_flight')); }; Array.from(document.querySelectorAll('.hotel .dollar')).forEach(e => e.addEventListener('click', tmp2)); function tmp2(e){ let tmp = null; e.preventDefault(); ((tmp = document.querySelector('.hotel .flight_type_hotel')) !== null && tmp.classList.toggle('pop_up_flight_hotel')); } }

PS While scribbling, the answer has already been written and accepted :)

How to choose class / id using JS?

3 answers 3

More articles: