Как назначить функцию javascript по classname

у меня есть несколько кнопок (сгенерированных php) для приложения корзины покупок:

<button class="addtocart" id="<?php echo $code; ?>"> 
    <span id="addtocartbutton">Add to cart</span>
</button>

Я хочу обновить свою корзину с помощью функции:

function AddtoCart() {
    alert("Added!");
}

позже я хочу найти идентификатор ($code), созданный кнопкой, которая его вызвала (не знаю, как это сделать, но, возможно, это другой вопрос). И вот я попробовал:--4--> 

document.getElementsByClassName("addtocart").addEventListener("click", AddtoCart());

но это не работает. Он работал с помощью onclick, но я понимаю, что правильный способ сделать это, создав Для EventListener. Кроме того, я не могу использовать функцию on() в jQuery, потому что я вынужден использовать jQuery версии 1.6, у которой ее нет.

Я посмотрел на https://stackoverflow.com/a/25387857/989468 и я не могу назначить его родителю, который является тегом p, потому что я, очевидно, не хочу, чтобы другие элементы в теге p были назначены этой функции.

6
addeventlistener javascript

5 ответов

в то время как ответы даны правильно, есть другой способ: Делегация Событие

прикрепите слушателя к одной вещи, в этом случае документ body а затем проверьте, какой элемент был фактически нажат:

предупреждение: набран на лету: непроверенный

// Only needed *once* and items may be added or removed on the fly without
// having to add/remove event listeners.
document.body.addEventListener("click", addtoCart);

function addtoCart(event) {
    var target = event.target;

    while(target) {
      if (target.classList.contains('addtocart')) {
        break;
      }
      // Note: May want parentElement here instead.
      target = target.parentNode;
    }

    if (!target) {
       return;
    }

    var id = target.dataset.id;
    alert(id + " added!");
}
3

вы должны прикрепить click событие для каждого элемента с классом addtocart С getElementsByClassName() верните массив всех объектов с заданным именем класса, чтобы вы могли использовать for чтобы перебрать все из них и связать его с функцией, которую вы хотите вызвать по щелчку (в моем примере эта функция называется my_function), посмотрите пример ниже : 

var class_names= document.getElementsByClassName("addtocart");

for (var i = 0; i < class_names.length; i++) {
    class_names[i].addEventListener('click', my_function, false);
}

надеюсь, что это помогает.

function my_function() {
     alert(this.id);
};

var class_names= document.getElementsByClassName("addtocart");

for (var i = 0; i < class_names.length; i++) {
    class_names[i].addEventListener('click', my_function, false);
}
<button class="addtocart" id="id_1">button 1</button>
<button class="addtocart" id="id_2">button 2</button>
<button class="addtocart" id="id_3">button 3</button>
<button class="addtocart" id="id_3">button 4</button>
2

Я покажу некоторые из ошибок, которые вы имели в своем коде, затем я покажу вам, как вы можете улучшить его, чтобы вы могли достичь того, что хотите, и я также покажу, что он работает с кнопками, динамически добавленными позже:

прежде всего, вам нужно передать ссылку на функцию (это имя) в addEventListener! Вы вызвали функцию и передали то, что она вернула. Вместо:

document.getElementsByClassName("addtocart").addEventListener("click", AddtoCart());

должно быть:

document.getElementsByClassName("addtocart").addEventListener("click", AddtoCart);

второй: document.getElementsByClassName("addtocart") возвращает a NodeList, вы не можете работать с ним, вам нужно работать с его элементами:document.getElementsByClassName("addtocart")[0], [1],....

в-третьих, я бы предложил вам использовать data-... в HTML-атрибутов:

<button class="addtocart" id="addtocart" data-foo="<? echo $code; ?>">

таким образом, вы можете передать еще больше данных. Теперь вы можете получить $code as:

document.getElementById('addtocart').dataset.foo


// el: the button element
function AddtoCart(el) {
    // this is the id:
    var id = el.id;

    // and this is an example data attribute. You can have as many as you wish:
    var foo = el.dataset.foo;
    alert(id + " (" + foo + ") added!");
}

// Try add a div or something around the area where all the buttons
// will be placed. Even those that will be added dynamically.
// This optimizes it a lib, as every click inside that div will trigger
// onButtonClick()
document.getElementById("buttons").addEventListener("click", onButtonClick);

// this shows that even works when you dynamically add a button later
document.getElementById('add').onclick = addButton;
function addButton() {
    var s = document.createElement("span");
    s.text = "Add to cart";
    var b = document.createElement("button");
    b.innerHTML = 'Third <span class="addtocartbutton">Add to cart</span>';
    b.className = "addtocart";
    b.id="third";
    b.dataset.foo="trio";
    // note the new button has the same html structure, class
    // and it's added under #buttons div!
    document.getElementById("buttons").appendChild(b);
}


// this will gett triggered on every click on #buttons
function onButtonClick(event) {
    var el = event.target;
    if (el && el.parentNode && el.parentNode.classList.contains('addtocart')) {
      // call your original handler and pass the button that has the
      // id and the other datasets
      AddtoCart(el.parentNode);
    }
}
<div id="buttons">
  <button class="addtocart" id="first" data-foo="uno">First <span class="addtocartbutton">Add to cart</span></button>
  <button class="addtocart" id="second" data-foo="duo">Second <span class="addtocartbutton">Add to cart</span></button>
</div>


<button id="add">Add new button</button>
2
<html>
<head>
<script>
window.onload=function{
    var btn = document.getElementsByName("addtocartbtn")[0];
    btn.addEventListener("click", AddtoCart());
}

function AddtoCart() {
    alert("Added!");
}
</script>
</head>
<body >
<button class="addtocart" name ="addtocartbtn" id="<?php echo $code; ?>" > <span id="addtocartbutton">Add to cart</span></button>

</body>
</html>
1

на самом деле класс В Javascript для множественного выбора вы должны предоставить индекс как массив.

 <button class="addtocart"> <span id="addtocartbutton">Add to cart</span></button>
        <script type="text/javascript">
        document.getElementsByClassName("addtocart")[0].addEventListener("click", AddtoCart);        
        function AddtoCart() {
            alert("Added!");
        }
        </script>

также ваш второй параметр был неправильным не используйте круглые скобки.

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

1