How to click multiple instances of the same icon on a webpage? (Javascript)

Question

I want to write a script that will click every instance of a certain icon. The following code is from the source that is what I want to click on. It has a onclick event defined, I just don't know how to search the page for these icons and then click on them. Can anyone help? Thanks.

<dl class="recommend">
    <dt class='recs'>
        <a href="javascript://" onclick="RecSpy('article', '6107445', 'tippers'); return false;">1</a>&nbsp;
    </dt>
    <dd>
        <a href="javascript:void(0);" onclick="RecommendItem(1,'article','6107445','1','recommendstatus_article6107445'); return false;" onmouseover="return overlib('Give thumbs up', WRAP);" onmouseout="return nd();">&nbsp;
            <img class='icon' title='' alt='Thumb up' style='background-position: -304px -48px;' src='http://geekdo-images.com/images/pixel.gif' />
        </a>
    </dd>
    <dt class='tippers'>
        <a href="javascript://" style='color: #969600;' onclick="RecSpy('article', '6107445', 'tippers'); return false;"></a>
    </dt>
    <dd>
        <a href="javascript:void(0);" onmouseover="return overlib('GeekGold Tip', WRAP );" onmouseout="nd();" onClick="GeekGoldTip(0,'article','6107445','recommendstatus_article6107445'); return false;">&nbsp;
            <img class='icon' title='' alt='tip' style='background-position: -368px -48px;'   src='http://geekdo-images.com/images/pixel.gif' />
        </a>
     </dd>
     <dd>
         <a href="javascript:void(0);" onclick="RecommendItem(0,'article','6107445','','recommendstatus_article6107445', 'article6107445' ); return false;" onmouseover="return overlib('Hide this post', WRAP);" onmouseout="return nd();">&nbsp;
             <img class='icon' title='' alt='Thumb up' style='background-position: -336px -48px;' src='http://geekdo-images.com/images/pixel.gif'/>
         </a>
     </dd>
     <dt class='thumbsdown'></dt>
 </dl>

Welcome to Stack Overflow, btw! – Matt Ball Jan 14 '11 at 18:49 — Matt Ball, Jan 14 '11 at 18:49

Jason Benson · Answer 1 · 2011-01-14T18:00:07.720

1

if using jQuery:

$('img.icon').parent().click();

if using native DOM manipulation (no jQuery) something like this:

var icons = document.getElementsByTagName('img');
for(var i = 0; i < icons.length; i++){
   if(icons[i].className == 'icon'){
       icons[i].parentNode.onclick();
   }
}

Edit: added native javascript code as well.

(isn't it obvious however with this that jQuery is a great addition?)

edited Jan 14 '11 at 18:00

answered Jan 14 '11 at 17:54

Jason Benson

3,371
1
19
21

2

If using jQuery, I would recommend `$('img.icon').closest('a').click();`. – Matt Ball Jan 14 '11 at 17:55
1

...that said, I seriously doubt the OP is using jQuery, based on the code sample. – Matt Ball Jan 14 '11 at 18:02
Well totally possible, that said I think pointing out that you can reduce all the hassle of something like this to one simple line with jQuery is worth mentioning. – Jason Benson Jan 14 '11 at 18:03
Code sample is from a webpage I want to use the script on. – akd Jan 14 '11 at 18:07
Well let us know. If you're not aware of whether you have access to jQuery then just use either of the methods Matt or I demonstrated. Note: because Matt stored the length in a variable and tests it whereas I retrieve it every time, Matt's script is going to perform better than mine on large sets. – Jason Benson Jan 14 '11 at 18:09

score 1 · Accepted Answer · edited May 23 '17 at 11:55

1

If not using jQuery:

function fireClick(elem)
{
    if (!elem) return;

    if (document.dispatchEvent)
    {
        // W3C
        var oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, elem);
        elem.dispatchEvent(oEvent);
    }
    else if (document.fireEvent)
    {
        // IE
        elem.click();
    }
}

var images = document.getElementsByTagName('img'),
    i,
    len = images.length,
    image;
for (i=0; i<len; i++)
{
    image = images[i];
    if (image.className === 'icon')
    {
        fireClick(image.parentNode);
    }
}

fireClick() remorselessly poached from here.

Edit re: OP comment "The first <dd><a href="javascript:void(0);" I want to click"

function fireClick(elem)
{
    if (!elem) return;

    if (document.dispatchEvent)
    {
        // W3C
        var oEvent = document.createEvent("MouseEvents");
        oEvent.initMouseEvent("click", true, true, window, 1, 1, 1, 1, 1, false, false, false, false, 0, elem);
        elem.dispatchEvent(oEvent);
    }
    else if (document.fireEvent)
    {
        // IE
        elem.click();
    }
}

var images = document.getElementsByTagName('img'),
    i,
    len = images.length,
    image;
for (i=0; i<len; i++)
{
    image = images[i];
    if (image.className === 'icon' && image.parentNode.nodeName === 'A' && image.parentNode.parentNode.nodeName === 'DD')
    {
        fireClick(image.parentNode);
        break;
    }
}

edited May 23 '17 at 11:55

Community

1
1

answered Jan 14 '11 at 18:00

Matt Ball

354,903
100
647
710

I updated the code in OP. I'm trying to use GreaseMonkey to run the scipt but it isn't working. Is that because I didn't include enough information like the dl class? The first
– akd Jan 14 '11 at 19:14
@akd: please elaborate on "isn't working." Do you see any errors in [Firebug](http://getfirebug.com)? Do the images have exactly `class="icon"` or are there other classes as well, like `class="foo icon bar baz"`? – Matt Ball Jan 14 '11 at 19:21
Firebug yields "ReferenceError: fireClick is not defined" when I try to run it. In the code in the OP, the
is what repeats throughout the page. The first
– akd Jan 14 '11 at 19:29
@akd: hm, interesting. Try switching the order, as I've done in my edit, so that `fireClick` is defined first. – Matt Ball Jan 14 '11 at 19:31
@akd: oh, so there is only one link you want to click? – Matt Ball Jan 14 '11 at 19:31
I want the script to run, and click on each instance of the particular image/button/icon (whatever it actually is) on the page, ignoring everything else. When I ran the above, it appears to be selecting other objects as well and missing some of the ones i want. – akd Jan 14 '11 at 19:39
@akd: I am confused. You're saying two conflicting things here. First you said _"The first `
– Matt Ball Jan 14 '11 at 19:43
So all the code in the OP repeats. I want to click each instance of the first
lines on the page. For each of those I want to click the first DD
– akd Jan 14 '11 at 19:46
@akd: okay, that makes sense. I guess you figured it out? – Matt Ball Jan 14 '11 at 20:05

How to click multiple instances of the same icon on a webpage? (Javascript)

2 Answers2