<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>RubberNeck Designs &#187; javaScript Tips</title>
	<atom:link href="http://www.rubberneckdesigns.com/category/javascript-tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.rubberneckdesigns.com</link>
	<description>Web Developer Notes &#38; Sharing</description>
	<lastBuildDate>Sat, 10 Apr 2010 15:22:42 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Dynamically Change the onClick, onChange (or other) Value of an Element</title>
		<link>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/</link>
		<comments>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/#comments</comments>
		<pubDate>Fri, 15 May 2009 16:38:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[AJAX]]></category>
		<category><![CDATA[User Iterface Design]]></category>
		<category><![CDATA[javaScript Tips]]></category>

		<guid isPermaLink="false">http://rubberneckdesigns.com/?p=106</guid>
		<description><![CDATA[If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.
Typically, you have an element such as an “input”, “a” or “select (options)” that has an [...]]]></description>
			<content:encoded><![CDATA[<p>If you are implementing AJAX, you will likely run into the need to change the functionality of a button dynamically. There is not a whole lot out there on how to quickly accomplish this so here is a simple explanation.</p>
<p>Typically, you have an element such as an “<span style="color: #008000;">input</span>”, “<span style="color: #008000;">a</span>” or “<span style="color: #008000;">select</span> (options)” that has an attribute of “<span style="color: #008000;">onClick</span>”, “<span style="color: #008000;">onMouseOver</span>” or “<span style="color: #008000;">onChange</span>” with a value of some function that will execute upon the event represented by the attribute.</p>
<p><span style="color: #0000ff;"><strong>UPDATE</strong></span>: This has been changed to accommodate ie. The following way will work in both Firefox and Internet Explorer:</p>
<p>button_element.onclick = function() {doSomething();};</p>
<p>Thanks! <a href="http://stackoverflow.com/questions/95731/why-does-an-onclick-property-set-with-setattribute-fail-to-work-in-ie">to this pos</a>t. (note: the answer is at the bottom of the post after some discussion.) Thanks for sharing <img class="alignnone" title="stackoverflow.com" src="http://stackoverflow.com/content/img/so/logo.png" alt="" width="128" height="31" /></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">To assign a new value to the attribute, you need to identify the element you want to change like this:</span></span></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">elem =  document.getElementById(&#8221;myElementId&#8221;)</span></span></p>
<p><span style="text-decoration: line-through;"><span style="color: #ff6600;">Then simply assign the new value to the attribute like this:</span></span></p>
<p><span style="color: #008000;"><span style="text-decoration: line-through;"><span style="color: #ff6600;">elem.attributes["onclick"].value = &#8220;myUpdatedFunction(&#8217;My parameter&#8217;)” ;</span></span><br />
</span><br />
Now, if someone clicks on the element, the new updated version of <span style="color: #008000;">myUpdatedFunction()</span> will be called. Notice that you can even pass a parameter to the function this way. Just be sure to nest your quotes properly.</p>
<p>This method will also work for other attribute types such as <span style="color: #008000;">onMouseOver</span>, <span style="color: #008000;">onChange</span> an so on.</p>
<p>I hope this helps.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.rubberneckdesigns.com/ajax-web-design/how-to-dynamically-change-the-onclick-and-other-value-of-an-element/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
