Javascript onclick function element selector

Question

I need to run onclick function when <a href..></a> is clicked.

<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>

I can't use <a href="#" onclick=""...></a> in html so I need to select a#btnRight.right. I tried:

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");

But it doesn't work. Thank you

`querySelectorAll` will return a `NodeList`. Try `querySelector` instead. Also when you already have id why are you complicating selector? Just use `document.querySelector("@btnRight")` — Rajesh, Feb 21 '17 at 12:09
Change to using `document.getElementById('btnRight')`, you don't need anything else, as an ID is always unique. — evolutionxbox, Feb 21 '17 at 12:09
@evolutionxbox If your version works, then the posted version `var element = document.querySelector("#btnRight.right");` should also work — Andreas, Feb 21 '17 at 12:11
http://jsbin.com/hejocar/1/edit?html,console,output — One of the versions you said doesn't work **does**. — Quentin, Feb 21 '17 at 12:13

score 1 · Answer 1 · answered Feb 21 '17 at 12:15

1

<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>

answered Feb 21 '17 at 12:15

Jmen Demidchenko

11
2

What is the difference between `element.onclick` and `element.addEventListener(..)`? – Hanz Feb 21 '17 at 12:22
@Hanz [link](http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) BTW: your var element = document.getElementById("btnRight") returns array of elements, not element. And element.onclick = (function() {...})() runs when the document is loaded. you should not call this func, it will be called when element is clicked =) – Jmen Demidchenko Feb 21 '17 at 12:46

Developer · Answer 2 · 2017-02-21T12:29:51.517

querySelectorAll returns a nodeList with all of the element with the specified id , so you need to change element to element[0] in case you have only one element with that id , and change your element id to btnRight like that :

<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>

of course you can also use getElementById like that :

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

    var count = 0;

    return function(e) {

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

            //...

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

score 0 · Answer 3 · answered Feb 21 '17 at 12:28

little modification to your code:

<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;

        }
    };
}

JoshulSharma · Answer 4 · 2017-02-21T12:21:30.507

-1

Try below selector, you can select any DOM element using its ID and make sure ID should be unique in your DOM.

 element = document.getElementById('btnRight');

Also, If you are trying to select multiple elements having your 'right' class then you should use below selector.

 element = document.getElementsByClassName("right");

edited Feb 21 '17 at 12:21

answered Feb 21 '17 at 12:10

JoshulSharma

163
7

Please add explanation. You are answering for reader and not for OP – Rajesh Feb 21 '17 at 12:14
When I tried this selector, typo was a problem. Thanks – Hanz Feb 21 '17 at 12:19

Javascript onclick function element selector

4 Answers4