0

Помогите разобраться , не могу понять в чем ошибка.. В общем задача следуюшая , нужно что бы вытягивался элемент из html по клику на нем и предположим выводилось значение этого элемента alertом.

window.onload=function(){
    gtClassName('B');
}


function gtClassName(nameClass){
    with(this){
        ObjectAdd = document.getElementsByClassName(nameClass);
        ObjectAdd.addEventListener('click' , outDate);
        function outDate(){
            alert(this);
        }

    }
}

Проделывал такое с помощью jq, но на чистом js не получается. При выборке по id работает, а по классу выдает в консоли ошибку:

TypeError: ObjectAdd.addEventListener is not a function;

И если указать ObjectAdd с индексом то тоже все сработает. Подскажите как сделать так , что бы процесс не требовал обращения к циклам , иначе как можно через this это сделать?

Заранее cпасибо!

0

2 ответа 2

1

Решается с помощью итерации как и было сказано пользователем Mr. Brightside, вот собственно и решение:

       window.onload = function(){
       var p = new getClassAndBinding();
        p.getValAndClick(Имя класса в HTML);
        }
      function getClassAndBinding(){

     this.getValAndClick = function(NameClass){

    this.getCls = document.getElementsByClassName(NameClass);
    for(i = 0;i<this.getCls.length;i++){
      this.getCls[i].addEventListener('click' , function(){
            alert(this.value);
    });}

        }}
0

Конечно, будет ошибка, ведь вам возвращается массив объектов, с заданным классом (читать доку тут). Если вы подставите ObjectAdd[0], то событие должно срабатывать для первого элемента.

Вы можете воспользоваться чем-нибудь подобным:

window.onload=function(){
    document.addEventListener('click' , function(e) {
        e = e || window.event;
        var target = e.target || e.srcElement,
            text = target.textContent || text.innerText; 
        alert(text);
    });
};

Однако, тут событие будет выводить уведомление при любом клике в любое место документа.

Согласно указанной выше документации, использование getElementsByClassName позволяет получить дочерние элементы только нужного элемента, и обрабатывать клики, соответственно, только для них. Однако, боюсь, без итерации тут не обойтись.

3
  • Спасибо, решил..
    – shimba
    23 мая 2016 в 18:23
  • вы можете опубликовать своё решение здесь, чтобы другие участники, столкнувшись с такой же задачей, могли воспользоваться вашим решением. 24 мая 2016 в 9:48
  • @Mr.Brightside, лучше сказать не массив, а коллекция
    – Grundy
    24 мая 2016 в 18:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.