Retrieve And Then Execute Onclick Function

[Costanza]

I'm trying to do something rather weird but I think it is the easiest and best option to achieve what I want to do. I have many elements and each one has one of several different onClick functions. I'm trying to retrieve a random element's onClick attribute and then execute that function. I have inline elements that are like this. I want to execute equip():

<div id="exampleID" onClick="equip()"></div>

I saw someone recommend this approach on another site for how to retrieve the value of onClick but now I don't know what to do with it to make it execute.

var onClickAttribute = $(currentOptionsArray[randomNumber].id).attr("onclick");

As always, thanks for your help!

[justsomeguy]

That line uses jQuery or some other library, so if you want to use that then you need to include whatever it depends on. Otherwise, you may be able to use element.getAttribute('onClick') to return the string of code, and then use eval to execute it. It may also return the attribute value as a function, but you can check what it is: alert(typeof document.getElementById('exampleID').getAttribute('onClick'));alert(document.getElementById('exampleID').getAttribute('onClick'));

[Costanza]

Ok this is a new one lol. I did what you recommended using getAttribute but it turns out that part of my code isn't even executing (I tested it by putting alerts in various places). It keeps giving me an error on this line:

$(currentCategory).style.backgroundImage = getComputedStyle(currentElement).getPropertyValue("background-Image");

It says that the result of getComputedStyle(currentElement) is not an object. Ironically the code that is getting the error is code that was working fine before. See, I have 2 functions (I'll call them A and B..). B calls function A. A and B were working fine until I added an if-statement to B. The if simply decides if A will execute or if some other code should execute instead. The weird thing is, the part that is failing to execute is NOT giving me an error, but the "else" (which executes A) is giving me an error in A. Here is the code in A (from which the above line of code was taken) Note, this is NOT the if-statement which I was speaking of in my previous paragraph:

if (window.getComputedStyle){$(currentCategory).style.backgroundImage = getComputedStyle(currentElement).getPropertyValue("background-Image");}else{$(currentCategory).style.backgroundImage = currentElement.currentStyle.backgroundImage;} 

So I used an alert to find out what currentElement was just before the line that givesme the error. It says this: currentElement is [object DOMWindow]

[Costanza]

Also, I tested what getAttribute was returning, and it's working as it should (returning only the ode within the quotation marks of onClick="") so that can't be the problem.

[Ingolme]

Where is "currentElement" being set?It seems to be pointing to the window, so I'm supposing you were using "this" in the window scope.

[Costanza]

I think I figured out part of the problem. It was else where in the code. However I'm still getting the same error but now it's in the part of the code that I said wasn't executing in my lat post (the part with getAttribute in it). Ingolme, currentElement is a variable that is passed into a function. It is an item of getElementsByClassName which was assigned to a NodeList which in turn had it's items copied into an array. So currentElement is a div element (confirmed to be adiv element by using alert boxes, but it only says it is a window DOM object on the times it fails). I'm using a randomize function so sometimes the chosen item works, and sometimes it doesn't. I can't figure out why sometimes the chosen item is thought to be the window object...

[Costanza]

This is how the function begins up until the line that fails:

function equipDouble(currentElement, catOne, catTwo){if (window.getComputedStyle){$(catOne).style.backgroundImage = getComputedStyle(currentElement).getPropertyValue("background-Image");

This is the function that calls the above function (shown up until the line that calls the above function):

function equipRandom(itemType){currentCategory = itemType;currentOptionsNodeList = document.getElementsByClassName(currentCategory);for (var i = 0; i < currentOptionsNodeList.length; i++){currentOptionsArray[i] = currentOptionsNodeList[i];}currentOptionsArray = removeIncompatibleOptions(currentOptionsArray);randomNumber = Math.floor(Math.random()*currentOptionsArray.length);if ($(currentOptionsArray[randomNumber].hasClassName('multiCategory'))){var onClickAttribute = $(currentOptionsArray[randomNumber].id).getAttribute('onClick');eval(onClickAttribute);

This is the element which SHOULD be currentElement:

<div id="GL_AG36" class="multiCategory grenade_launcher handguard comp318 comp400 comp480 itemContent" onClick="equipDouble(this, 'handguard', 'grenade_launcher')"></div>

[Ingolme]

Of course, it's copying "this" from the onclick attribute, but when executed outside of the element's click handler, "this" refers to the window. You're going to have to do some string replacement before you execute the code. Replace "this" for an actual reference to the element, such as "document.getElementById('GL_AG36')"You can use the replace() method.

[Costanza]

Of course, it's copying "this" from the onclick attribute, but when executed outside of the element's click handler, "this" refers to the window. You're going to have to do some string replacement before you execute the code. Replace "this" for an actual reference to the element, such as "document.getElementById('GL_AG36')"You can use the replace() method.

Oh lol, well that was simple. That should've been super obvious to me. But I'm pretty new to javascript and coding in general so I'm still getting used to how the language works. Thank you, I was looking up and down my files for what it could be. I've just got to remember some of these common rules so that I'll check those first and potentially save myself a lot of time!

[ShadowMage]

Wouldn't it be easier to just call the click() method? Instead of this:

var onClickAttribute = $(currentOptionsArray[randomNumber].id).getAttribute('onClick');eval(onClickAttribute);

You have this:

$(currentOptionsArray[randomNumber].id).click();

[Costanza]

Wouldn't it be easier to just call the click() method? Instead of this:

var onClickAttribute = $(currentOptionsArray[randomNumber].id).getAttribute('onClick');eval(onClickAttribute);

You have this:

$(currentOptionsArray[randomNumber].id).click();

That certainly would be simpler. I tried it just now but it gives me this error: Result of expression '$(currentOptionsArray[randomNumber].id).click' [undefined] is not a function.

[Ingolme]

Are you using jQuery or is that a different framework?

[Costanza]

Are you using jQuery or is that a different framework?

I'm using Prototype. But should I add jQuery? I will if it has useful functions like that. (Actually, can I even use more than one added framework or will that have conflicts?) I'm using Prototype for hasClassName() which I really need.

[ShadowMage]

jQuery has a similar method to hasClassName called hasClass. So if you're comfortable converting your code, you could just use jQuery. Otherwise, you'll have to see if Prototype either has a way to call an element's click method, or if there's a way to get a reference to the element you're selecting and then call its native click method. Or....you could leave it the way you had it. Its up to you, really.