0

I have an image on a page. I cannot change the page. When you click on the images this page has, a function run and processes the image. The image is not a button. To make the image respond to clicks, the page developer added a listener to it. In fact, every image on that page has a listener. The listener is listening the "img" tag.

When you click on an image, the Javascript checks to see if that image should respond to a click and then runs or not a function.

I am developing some automation to fill the form where this image is. This automation script needs to fill the form and click on that image. How do I click on that image using javascript?

What should I look on the code to discover the method that runs when the image is clicked?

My problem is this: as the listener is attached to all images on that page but just some respond to the clicks, I suppose that the function attached to the listener has to receive a reference to the image that needed to be process... this is what complicates everything...

If you guys want, I can zip the page and the javascripts and put it here.

thanks

7
  • 2
    I'm sorry someone has done this to you. A jsfiddle.net or other live example would be just as good as a zip. Sep 23, 2011 at 2:22
  • 1
    I'm not actually sure why this would be so complicated. You can search for the word "click" or "onclick" in the code. You can then call whatever is used as the click handler. Do keep in mind that you DO NOT want to fire the click function as this is poor coding practice. Just call the function that that event handler calls. Sep 23, 2011 at 2:26
  • 1
    Vivek - could you expand on that? Why is that poor coding practice? Sep 23, 2011 at 2:32
  • @VivekViswanathan there's 1 trillion "click" on the code. There's no "onclick". It is complicated because the listener is added to the img tag, not to one specific image. So, once clicked, the listener has to parse the image name to the function but the function also comes from a list... the guys who created that are insane, I know.
    – Duck
    Sep 23, 2011 at 2:38
  • 1
    @Philip Schweiger: The user is not actually clicking on the image. If you are trying to debug something related to clicks a year from now and attach a console.log to a click function, it'll fire even when there are no clicks. Instead you should keep event handlers as light as possible--generally shuttling the information to another function. Fore example, if someone can either click on an italics button or hit CTRL+i to get italics characters, you can make your code reusable and easily understandable by keeping your handlers light and by putting the meat of the code in a separate function. Sep 23, 2011 at 15:13

2 Answers 2

2

http://jsfiddle.net/efortis/9nmAR/

$(document).ready(function (){
    $('img').click(function() {
        alert($(this).attr('alt'));     
    });


$('img').eq(0).click();     // << I think this is what you need

});
1
2

Dispatch a click event:

var target = yourImage;  //<--(insert your image here);
if(document.createEvent) {
  //Normal W3C event model
  var clickEvent = document.createEvent("MouseEvents");
  clickEvent.initMouseEvent("click", true, true, window, 
    0, 0, 0, 0, 0, false, false, false, 0, null);
  target.dispatchEvent(clickEvent);
}
else {
  //IE event model
  target.fireEvent("onclick");
}

Normally, clicks are attached to an element using element.addEventListener and element.attachEvent, but sometimes element.onclick is used.
If the page uses jQuery, it might use the live method, which attaches to the root node. However, the previous method should work correctly since the event's target is set to target.

5
  • I think we may have something here... the problem is this: the image doesn't have an id. This is declaration on the code: <div class="leaderboard-text"> <span id="addon-add-language-button"><image class="ajaxListAddButtonEnabled" listId="localizationList" src="/itc/images/blue-add-language-button.png"><image class="ajaxListAddButtonDisabled" listId="localizationList" style="display:none;" src="/itc/images/blue-add-language-button-disabled.png"></span> </div>
    – Duck
    Sep 23, 2011 at 2:34
  • ... continuing last comment... yes, it is using jQuery and an event listener.
    – Duck
    Sep 23, 2011 at 2:36
  • @DigitalRobot Could you get a reference to the element somehow? You could use jQuery or CSS selectors: #addon-add-language-button image .ajaxListAddButtonEnabled. EDIT: Also, can use jQuery? Sep 23, 2011 at 2:39
  • how do I do that? can you expand what you mean?
    – Duck
    Sep 23, 2011 at 2:48
  • To click the first image using jQuery is very simple: $("#addon-add-language-button image.ajaxListAddButtonEnabled").click();. Without jQuery, add this to the code above: var target = document.querySelector("#addon-add-language-button image.ajaxListAddButtonEnabled"); Sep 23, 2011 at 3:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.