Как инициализировать объект в DOM JS?

Question

[Александр Дегтярев]

Есть представление:

<section>
    <div>
      <h2>Пряник 1</h2>
      <a href="#" name="1" data-cost="150" class="item">Купить пряник 1</a>
    </div>
    <div>
      <h2>Пряник 2</h2>
      <a href="#" name="2" data-cost="350" class="item">Купить пряник 2</a>
    </div>
    <div>
      <h2>Пряник 3</h2>
      <a href="#" name="3" data-cost="1050" class="item">Купить пряник 3</a>
    </div>
  </section>

И есть скрипт:

var co = document.getElementsByClassName("item");
var sum = 0;

co[0].addEventListener("click", function () {
    var item = co[0].getAttribute("data-cost");
    
    sum = +sum + +item;
    alert(sum);
});

как сделать чтобы при нажатии на ЛЮБОЙ item шло сложение а не на заранее определенный?

Comments

[Алексей Ярков]

Мне только спросить! =)
А что это?
sum = +sum + +item;
Я пытался понять, честно...

[Александр Дегтярев]

Алексей Ярков: Приведение к числу, иначе в виде строки у меня передается и происходит конкатенация строк, такой вид неявно преобразует текст к числу, ели возможно

Answer 1

[Alex Sokol]

var co = document.getElementsByClassName("item");
var sum = 0;

[].forEach.call(co, function(el) {
    el.addEventListener("click", function () {
        var item = this.getAttribute("data-cost");
        sum = +sum + +item;
        alert(sum);
    });
});

Comments

[Александр Дегтярев]

Благодарю за наводку и решение))

[Alex Sokol]

нз=)

[Александр Дегтярев]

Alex Sokol: а есть методы без привязывания контекста, более простые?

[Alex Sokol]

так куда проще то))) возможно вот так: [].forEach.call(co, function(el, index) {var curIndex = index;} - использовать индекс текущего элемента, выбрав из массива var co = document.getElementsByClassName("item"); - нужный элемент, и потом взять его атрибут.

[Alex Sokol]

Почему не использовать контекст this ? Как по мне самый простой и лучший вариант.

[Александр Дегтярев]

Alex Sokol: да обучаюсь я еще только, для меня это все капец - стараюсь понимать и делать как можно проще

[Александр Дегтярев]

Alex Sokol: пробовал через Object.keys делать, не получилось также

[Дмитрий Беляев]

Alex Sokol: Cоздавать пустой массив только ради того, чтоб вызвать его метод? Неужели написать Array.prototype намного длиннее чем [] ?

[Alex Sokol]

Дмитрий Беляев: Кому как проще

[Дмитрий Беляев]

Alex Sokol: Вам то может и проще, а у пользователя страница тормозит и браузер по 8 гиг оперативы жрет из-за таких вот упрощений

[Alex Sokol]

Дмитрий Беляев: видать ваш пользователь на калькуляторе запускает приложения