[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 562
  • Last Modified:

javascript: change the onClick event dynamically

The onClick event is dynamically created at load time.  Inside the onclick event is a value similar to the following  table_field_1.  Each time a new row is created, the onclick event needs to have table_field_1 changes to table_field_2, table_field_3 and so on.

The code I included has issues because the getAttribute("onCick") returns the keyword function.  If I could get it to return just the actual content of the onClick, I think it could work.

Need help shaping this solution.
if(els[el].id.indexOf("anchor") > -1)
				//sample code that needs to be manipulated...
				// onClick=cal.select(document.forms['WebForm']." & fieldelement.getAttribute("id")  & ",'anchor1','MM/dd/yyyy'); return false

				//retrieve the onClick event as text and determin the begin and end point for the number following the last underscore
				//var starttargpos = els[el].getAttribute("onClick").lastIndexOf("_") 
				//var stoptargpos =  els[el].getAttribute("onClick").indexOf(",'anchor1") 
				//parse out the text to the left and the text representing the number to be changes
				//lefttext = els[el].getAttribute("onClick").substring(0,starttargpos - 1)
				//targettext = els[el].getAttribute("onClick").substring(starttargpos,stoptargpos)
				//increment the number and retrieve the text to the right
				//newtargettext = Number(targettext) + 1
				//righttext = els[el].getAttribute("onClick").substring(stoptargpos + 1)
				//reassemble the left, target and right together and assign to the onClick attribute
				//newonclick = lefttext + newtargettext + righttext
				//els[el].getAttribute("onClick") = els[el].getAttribute("onClick")

Open in new window

  • 2
3 Solutions
have you tried seeing what getAttribute("onCick").value returns?
Actually not sure that's any help at all.
taken from
NodeList elementsByTagName = browser.getDocument().getElementsByTagName("input");
        for (int i = 0; i < elementsByTagName.getLength(); i++)
            HTMLElement element = (HTMLElement) elementsByTagName.item(i);
            Attr onclick = element.getAttributeNode("onclick");
            System.out.println("onclick = " + onclick.getValue());

Open in new window

I'm confused by the description and the example, they don't seem to jive together. But does this help any.

<a id="clicker" onclick="foo('table_field_1')">click me</a>

<script language="javascript">
    var tableCount = 1;

    function foo(bar) {
        document.getElementById("clicker").onclick =
            function(event) { foo("table_field_"+tableCount); };

Open in new window

Gurvinder Pal SinghCommented:
you need to change the event like this
document.getElementById('tr1').onclick = newFunction;

But in case you want to use the function with params then

document.getElementById('tr1').onclick = new Function(someFunctionName(input + counter + ));


Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now