CODEWITHSUNDEEP
javascript
user2599295
user2599295

Reputation: 31

How to perform an automated onclick() at a certain element if the ID is always changing?

In Javascript, I'm trying to create a user script that will automatically click on a 'Blue Button'. Normally, I would do this:

var bluebutton = "document.getElementById("blue_button")"

if (bluebutton) {
    bluebutton.onclick();
    }

But NOW, the blue button does not have its own obvious ID. It's ID is randomized, and could be either button1, button2, or button3.

Here's the HTML that I'm talking about:

<div class="button_slot">
    <div id="button1" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button1')" onmouseover="infopane.display('Blue Button','I'm a blue button!')" onmouseout="infopane.clear()">

<div class="button_slot">
    <div id="button2" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button2')" onmouseover="infopane.display('Red Button','I'm a red button!')" onmouseout="infopane.clear()">

<div class="button_slot">
    <div id="button3" style="cursor:pointer; padding-left:30px" onclick="buttonsubmit('button3')" onmouseover="infopane.display('Yellow Button','I'm a yellow button!')" onmouseout="infopane.clear()">

After a bit of reading, I've concluded that the only way to direct my onclick() to the correct element/string is by using ".toString().match(name)" as shown below:

function clickbutton(name) {
    var button_list = document.querySelectorAll('.button_slot > div');
    for (var i=0; i<button_list.length; i++) {
        var button = button_list[i];
        if (button.onmouseover && button.onmouseover.toString().match(name)) {
            button.onmouseover();
            button.onclick();
            break;
            }
        }
    }

clickbutton('Blue');

(note: sometimes I use clickbutton('Red'); or clickbutton('Yellow'); just to experiemen)

Now here's the problem. This method works so horribly... Sometimes, my script completely misses the button (as in, nothing gets clicked) EVEN THOUGH there is definitely a string with the word 'Blue' in it.

If someone could identify what I'm doing wrong, or perhaps even suggest a more effective method, I would appreciate it so much! Thank you!

Upvotes: 0

Views: 352

Answers (2)

Tim Mac
Tim Mac

Reputation: 1149

First, I'm not sure why you can't give each button an ID which corresponds to it's color, because I believe that would be the easiest way to achieve this. But assuming that, for some reason, your button ID's must be randomized (or for that matter, maybe they don't even have an ID).

In this case, what I would do is give each button a data-button-type attribute, for instance:

<div data-button-type="Blue" id="..." style="..." onclick="..." onmouseover="..." onmouseout="...">

Now, I can check the attribute when looking for which button to click, for example:

function clickbutton(name) {
    var button_list = document.querySelectorAll('.button_slot > div');
    for (var i=0; i<button_list.length; i++) {
        var button = button_list[i];
        if (button.getAttribute('data-button-type') == name) {
            button.onmouseover();
            button.onclick();
            break;
        }
    }
}

clickbutton('Blue');

Upvotes: 1

Andrew Plummer
Andrew Plummer

Reputation: 1170

I'm pretty sure you want to use indexOf although I think its most likely a timing issue.

First just try invoking it in a setTimeout function, so the document has (probably) loaded fully when you execute. It would explain it sometimes working sometimes not.

setTimeout(function(){ clickbutton(name) }, 3000);

I would do:

var clickButton = function(name){
  var button_list = document.querySelectorAll('.button_slot > div');
  for(var i = 0; i < button_list.length; i++){
    var button = button_list[i];
    if(button.getAttribute('onmouseover').indexOf(name) !== -1){
       button.onclick.apply(); // They seem to have parameters in your example?
    }
    break;
  }
}
setTimeout(function(){ clickButton('blah') }, 3000);

As a first attempt...

Upvotes: 0

Related Questions