С JQuery на чистый Javascript код?

Question

[Дима Самсонов]

всем добрый день.
к сожалению я изучал JS с помощью библиотеки Jquery, и так и не научился толком писать на чистом JS.
Решил что для практики лучше всего переписать свой старый проект с JQ на JS. но к сожалению есть моменты которые мне непонятны(
в HTML есть кнопка с data атрибутом(data-id). нужно что бы при нажатии на эту кнопку в массив Cart записывался этот (data-id), вот как было это на JQ .

<button id="addToCart" data-id="001">в массив</button>

var cart = {};

$('.addToCart').on('click', addToCart() );

function addToCart(){
    var articul = this.attr('data-id');
    cart[articul] = 1;
    console.log(cart);
}

как этот кусочек кода будет выглядеть на чистом Js?
буду очень благодарен за помощь.

Comments

[Сергей Горностаев]

Вы и jQuery толком не выучили. Data-атрибуты стоит получать с помощью метода data, а метод on принимает ссылку на функцию, а не результат её выполнения.

[Максим Тимофеев]

не особо правильная практика юзать для таких вещей класс, как селектор. Классы должны заниматься стилизацией. Так как-то правильней

$('[data-toggle=add-to-cart]').on('click', function(){...});

[lightalex]

$('.addToCart').on('click', addToCart() );
Оно случайно не дает у вас одно ложное срабатывание при загрузке данного кода?
Вы при передаче функции вызываете ее
Должно выглядеть вот так:
$('.addToCart').on('click', addToCart);
То бишь функции мы передаем без скобок

Answer 1

[Никита Баев]

Советую приглядываться к youmightnotneedjquery

var cart = {};

function addToCart() {
    var articul = this.dataset.id;
    cart[articul] = 1;
    console.log(cart);
}

document.getElementById('addToCart').addEventListener('click', addToCart);

Answer 2

[Александр Севиринов]

Рекомендую более актуальный материал!

<button class="addToCart" data-id="001">в массив 1</button>
<button class="addToCart" data-id="002">в массив 2</button>
<button class="addToCart" data-id="003">в массив 3</button>
<button class="addToCart" data-id="004">в массив 4</button>

var cart = {};

function addToCart(articul) {
  cart[articul] = 1;
  console.log(cart);
}

var addBtn = document.getElementsByClassName('addToCart');
[].forEach.call(addBtn, function(element) {
  element.addEventListener('click', function() {
    addToCart(this.getAttribute('data-id'));
  });
});

Comments

[Bhudh]

Спрашивается, для кого изобретали dataset?

Answer 3

[Дима Гашко]

https://learn.javascript.ru - вторая часть.

Answer 4

[bro-dev0]

JQuery это не js для нубов, это инструмент позволяющий не думать о кроссбраузерности. Даже зная как всё устроено, все равно лучше юзайте готовые либы, в общем случае $(document).on() работает предсказуемие чем addEventListener