10 I wou...">

click () with links

I have a page with several links, which are all like this:

<a href="/" class="answer-item" rel="0">10</a>

      

I would like to use a function click()

to simulate a user click on one of them, but that doesn't work in my tests.

//Evaluate a mathematical expression from another part of the page
var numberAnswer = eval(document.getElementById("question-title").getElementsByTagName("b")[0].innerHTML);

//Builds an array with the links that may match the expression
var choices = document.getElementsByClassName('answer-item');

//Iterates through array to find a match then clicks it
for(var i in choices){
    if(choices[i].innerHTML == numberAnswer){
        choices[i].click();
        break;
    }
}

      

I'm sure this choices[i]

is the correct item.

Firefox does nothing, Opera does nothing, and click () is not available in Chrome (I think).

Also, I tried to use dispatchEvent()

in this form:

var evt = document.createEvent('MouseEvents');
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
choices[i].dispatchEvent(evt);

      

This apparently went back true

to Firefox and Chrome, but nothing has changed.

The most annoying thing is that an attribute-only link href

works fine with .click()

.

+3


source to share


2 answers


EDIT

For discussion in the comments area, it seems that the behavior used in this answer is non-standard, or at least not compatible with user agents. I am investigating this issue further; if you use the information in this answer, check the code carefully in all browsers to make sure it works as expected.


EDIT 2

There is a "just do it" approach in a comment from the OP that will work here. This has some disadvantages, namely that your bound events cannot be called preventDefault

- this method will not respect it. You could create some kind of event wrapper that could handle this ... anyway, here's the code and fiddle:

HTML:

<br><br>
<!-- I am totally misusing this API! -->
<a href="http://jsfiddle.net/echo/js/?delay=0&js=The link was followed;" id="progra_link">Some link with an event that uses preventDefault()</a>
<br><br>
<button id="doit_btn">Programmatically click the link</button>

      

Script:

function do_program_click () {
    var lnk = document.getElementById('progra_link');
    var loc = lnk.href;
    if (!loc)
        return false;            
    // call this to fire events
    lnk.click();

    // then follow the link
    document.location = loc;
    return;
};
function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

// bind an event to the link to test force event trigger
addEvent(
    document.getElementById('progra_link'),
    'click',
    function (e) {
        e.preventDefault();
        alert('Testing element click event, default action should have been stopped');
        return false;
    }
);
// bind event to the leeroy button
addEvent(
    document.getElementById('doit_btn'),
    'click',
    do_program_click
);

      

jsFiddle: http://jsfiddle.net/CHMLh/




Original Answer

Your code sample is incomplete. If I only take the basics, it works correctly:

<script>
   var lnk = document.getElementById('test');
   lnk.click();
</script>
<a id="test" href="/" class="answer-item" rel="0">test link</a>

      

jsFiddle: http://jsfiddle.net/cgejS/

I would revisit your assumptions that you are dealing with the correct dom element.

In an unrelated note, these are:

var numberAnswer = eval(document.getElementById("question-title").getElementsByTagName("b")[0].innerHTML);

      

... what? eval

is evil - if you ever use it for any reason, ask if you have the right approach. Are you trying to get an integer from a string? See parseInt

( docs ), the correct tool for this job:

// this line is still failure-prone...
var ele = document.getElementById("question-title").getElementsByTagName("b")[0];
var numberAnswer = 0;
if (ele)
   numberAnswer = parseInt(ele.innerHTML);

      

+3


source


Easy.

HTML (note that I added the 'id' tag):

<a id="answer-item" href="/" class="answer-item" rel="0">10</a>



JS:

document.getElementById('answer-item').click();

      

0


source







All Articles