Селектор элементов функции onclick

-1

Мне нужно запустить функцию onclick, когда щелкнули <a href..></a>.Селектор элементов функции onclick

<div class="gallery"> 
    <div id="btn"> 
     <a href="#" id="btnRight" class="right"></a> 
    </div> 
</div> 

<script type="text/javascript"> 
var element = document.querySelectorAll("a#btnRight.right"); 
element.onclick = (function() { 

    var count = 0; 

    return function(e) { 

     count++; 
     console.log(count); 
     if (count === 3) { 

      //... 

      count = 0; 
     } 
    }; 
})(); 
</script>

Я не могу использовать в HTML <a href="#" onclick=""...></a> так что мне нужно, чтобы выбрать A # btnRight.right. Я пробовал:

var element = document.querySelectorAll("a#btnRight.right");
var element = document.querySelector("#btnRight.right");
var element = document.getElementById("btnRight").getElementsByClassName("right")[0];
var element = document.getElementById("btnRight").getElementsByTagName("a");

Но это не работает. Спасибо

источник

2017-02-21 Hanz

'querySelectorAll' возвращает' NodeList'. Вместо этого попробуйте 'querySelector'. Также, когда у вас уже есть id, почему вы усложняете селектор? Просто используйте 'document.querySelector (" @ btnRight ")' – Rajesh

Измените использование 'document.getElementById ('btnRight')', вам больше ничего не нужно, поскольку идентификатор всегда уникален. – evolutionxbox

@evolutionxbox Если ваша версия работает, то опубликованная версия 'var element = document.querySelector (" # btnRight.right ");' должна также работать – Andreas

-1

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

element = document.getElementById('btnRight');

Кроме того, если вы пытаетесь выбрать несколько элементов, имеющих свой «правый» класс, то вы должны использовать ниже селектор.

element = document.getElementsByClassName("right");

источник

2017-02-21 12:10:59 JoshulSharma

Пожалуйста, добавьте пояснения. Вы отвечаете за читателя, а не за OP – Rajesh

Когда я пробовал этот селектор, опечатка была проблемой. Спасибо – Hanz

'var element = document.getElementById ('btnRight');' работает ... – Hanz

<div class="gallery"> 
    <div id="btn"> 
     <a href="#" id="btnRight" class="right">CLICK ME!</a> 
    </div> 
</div> 

<script type="text/javascript"> 
    var element = document.getElementById("btnRight"); 
    element.addEventListener('click', function() { 
     var count = 0; 
     return function(e) { 
      count++; 
      console.log(count); 
      if (count === 3) { 
       //... 
       count = 0; 
      } 
     }; 
    }() 
    ) 
</script>

источник

2017-02-21 12:15:49

В чем разница между 'element.onclick' и' element.addEventListener (..) '? – Hanz

@Hanz [ссылка] (http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) BTW: Ваш вар элемент = document.getElementById ("btnRight") возвращает массив элементов, а не элемент , И element.onclick = (function() {...})() запускается при загрузке документа. вы не должны называть этот func, он будет вызываться при нажатии элемента =) –

querySelectorAll возвращает Nodelist со всеми элемента с указанным идентификатором, так что вы должны изменить элемент к элементу [0] в случае, если у вас есть только один элемент с этим идентификатором, и изменить свой элемент идентификатор btnRight так:

<div class="gallery"> 
    <div id="btn"> 
     <a href="#" id="btnRight" class="right"></a> 
    </div> 
</div> 

<script type="text/javascript"> 
var element = document.querySelectorAll("#btnRight"); 
element[0].onclick = (function() { 

    var count = 0; 

    return function(e) { 

     count++; 
     console.log(count); 
     if (count === 3) { 

      //... 

      count = 0; 
     } 
    }; 
})(); 
</script>

, конечно, вы можете также использовать getElementById так:

var element = document.getElementById("btnRight"); 
element.onclick = (function() { 

    var count = 0; 

    return function(e) { 

     count++; 
     console.log(count); 
     if (count === 3) { 

      //... 

      count = 0; 
     } 
    }; 
})();

источник

2017-02-21 12:24:43

немного изменения в код:

<div class="gallery"> 
<div id="btn"> 
    <a href="#" id="btnRight" class="right">pp</a> 
</div>

document.getElementById("btnRight").onclick = CustomFunction; 

    function CustomFunction() { 

    var count = 0; 

    return function (e) { 

     count++; 
     console.log(count); 
     if (count === 3) { 

      //... 

      count = 0; 

     } 
    }; 
}

источник

2017-02-21 12:28:43 Sooraz

ответ

Смежные вопросы