Javascript click a class button

Question

So this is just a small personal project that I'm working on using awesomium in .net. So in awesomium I have this browser open and all that and I want to click this button that has this code.

<a class="buttonright" >&nbsp;Bump&nbsp;</a>

But considering it's a class and not a button I'm having trouble finding a way to "click" it. My plan is to use javascript in awesomium to click it but maybe I'm approaching this from the wrong direction?

Thanks

Answer 1

Depending on how you want to handle the event, there are numerous roads you can take.

The simplest one is this :

<script type="text/javascript">
  function buttonRight_onclick(event, sender)
  {
     alert("HEY YOU CLICKED ME!");
  }
</script>


<a class="buttonright" click="buttonRight_onclick(event, this)">

whereas if you were using a framework like jQuery, you could do it like this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".buttonright").on("click", function(event) {
      alert("HEY YOU CLICKED ME!");
    });
  });
</script>

<a class="buttonright" >Bump</a>
<a class="buttonright" >Also bump</a>

Answer 2

<script type="text/javascript">
  function Button_onclick(event, sender)
  {
     alert("Button Clicked!");
  }
</script>

    <a class="Button" click="Button_onclick(event, this)">

Answer 3

Update:
After a lot of comments (back and forth) I set up a fiddle, with a working version of this code (the code here works, too, but needed some debugging). The eventTrigger function in the fiddle has been stripped of all comments, but I've added an example usage of this function, which is generously sprinkled with comments.
Browse through it, fork it, play around and get familiar with the code and concepts used there. Have fun:

Here's the fiddle

---

If by "finding a way to click it" you mean: how to programmatically click this anchor element, then this is what you can use:

Here's a X-browser, slightly verbose yet comprehensive approach:

var eventTrigger = function(node, event)
{
    var e, eClass,
        doc = node.ownerDocument || (node.nodeType === (document.DOCUMENT_NODE || 9) ? node : document);
        //after checking John Resig's Pro JavaScript Techniques
        //the statement above is best written with an explicit 9
        //Given the fact that IE doesn't do document.<NODE_CONSTANT>:
        //doc = node.ownerDocument || (node.nodeType === 9 ? node : document);
    if (node.dispatchEvent)
    {//dispatchEvent method is present, we have an OK browser
        if (event === 'click' || event.indexOf('mouse') >= 0)
            eClass = 'MouseEvents';//clik, mouseup & mousedown are MouseEvents
        else
            eClass = 'HTMLEvents';//change, focus, blur... => HTMLEvents
        //now create an event object of the corresponding class
        e = doc.createEvent(eClass);
        //initialize it, if it's a change event, don't let it bubble
        //change events don't bubble in IE<9, but most browsers do
        //e.initEvent(event, true, true); would be valid, though not standard
        e.initEvent(event, !(event === 'change'), true);
        //optional, non-standard -> a flag for internal use in your code
        e.synthetic = true;//mark event as synthetic
        //dispatch event to given node
        node.dispatchEvent(e, true);
        //return here, to avoid else branch
        return true;
    }
    if (node.fireEvent)
    {//old IE's use fireEvent method, its API is simpler, and less powerful
        //a standard event, IE events do not contain event-specific details
        e = doc.createEventObject();
        //same as before: optional, non-standard (but then IE never was :-P)
        e.synthetic = true;
        //~same as dispatchEvent, but event name preceded by "on"
        node.fireEvent('on' + event, e);
        return true;//end IE
    }
    //last-resort fallback -> trigger any directly bound handler manually
    //alternatively throw Error!
    event = 'on' + event;
    //use bracket notation, to use event's value, and invoke
    return node[event]();//invoke "onclick"
};

In your case, you can use this function by querying the DOM for that particular element, like so:

var elem = document.querySelector('.buttonright');//IE8 and up, will only select 1 element
//document.querySelectorAll('.buttonright'); returns a nodelist (array-like object) with all elements that have this class
eventTrigger(elem, 'click');

That should have the effect of clicking the anchor element

If you're looking for a way to handle click events on this element (an anchor that has a buttonright class), then a simple event listener is all you need:

document.body.addEventListener('click', function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'a' && target.className.match(/\bbuttonright\b/))
    {//clicked element was a link, with the buttonright class
        alert('You clicked a button/link thingy');
    }
}, false);

That's the cleanest way to do things (one event listener handles all click events). Of course, you can bind the handler to specific elements, too:

var buttons = document.querySelectorAll('.buttonright'),
    handler = function(e)
    {
        alert('Clicked!');
    };
for (var i=0;i<buttons.length;++i)
{
    buttons[i].addEventListener('click',handler, false);
}