JavaScript - Proper Way To Have Two Onclick Events Within One Anchor Tag?

I am a Javascript newbie. I'm trying to code a page that has thumbnails of smaller images that when each image is clicked a larger image will load above the thumbnails, plus text within a div will change, plus more Javascript behind a shopping cart button will change. I'm not sure if this is even possible and have been searching and experimenting with the code without success.

To view the webpage I'm working on: http://toymakerpress.com/website/Fre.../TestPage.html

If you click on the dog image you can see where I'm headed (I also haven't had any luck loading the shopping cart button with it's unique Javascript code).

Here is my code so far:
The shopping cart button (I would like this code to swap out everytime I load a new image):
Code:

<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&amp;i=A0085&amp;cl=82487&amp;ejc=2" rel="nofollow" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img src="../images/addtocart1.gif" border="0" alt="Add to Cart"/></a>

The code I'm working on for each thumbnail image:
Code:

<td><div align="center">
                  <a href="javascript:changeImage('../images/FreePlans/littledog-4Lg.jpg') "javascript:="javascript:"" onClick="load_content('orderform','more content') "><img src="../images/FreePlans/littledog-4.jpg" width="140" height="140" border="0" /></a></div></td>

Thanks!

HTML TARGET:

Code:

<div id="login_link" style="margin-top:-142px;margin-left:245px;height:142px;">
		<img id="login_link" src="menu_button.png" /><a href="#"><img src="menu_button.png" /></a></div>
</div>

I'm trying to get menu_button.png to change to menu_button2.png on mouseover... I'd also like it to play a sound on click like "click.wav" I can't rename the div because it controls the slider

Heres my current project table:

http://bit.ly/dbwH23

I tried to put it in a span and have the span referance to the next tag but it didn't seem to work at least not in firefox. I'm going to keep lookin around but i'm not used to these types of code structure.

I was thinking of Embeding a flash file inside the div instead but that might be overkill. Anyone know of a solution that might work?

To order a customized product from my site, the user has to upload an image and then submit text (separate steps but part of the same php form) before adding to their cart. Currently, the user must scroll back down from the top of the page to the next part of the form after each step which is more confusing than I would like.

The first step of the form uses a straight forward <form> and I was able to add an action="#anchor" to jump down to where I set the first anchor.

The second step is regrettably not so straight forward and I'm having trouble adding an anchor. After entering text, the user clicks a submit button which triggers an alert letting them know the text was submitted successfully. When the user clicks the okay button on the popup alert, I would like the page to jump down to the 'add to cart' portion.

This is the button: Code:

echo '<tr>
    <td valign="bottom" colspan="2" align="center">
        <input id="delete_button" class="button" type="submit" value="Attach Text" onclick="return( confirm( this.form ) );" />
	</td>
</tr>';

And this is the alert: PHP Code:
echo vmCommonHTML::scriptTag('', "function confirm( form ) {
        form.task.value='confirm_text'; 
        alert('Your text was successfully attached.');
        return true;
        
}" ); 


How can I prevent the page from returning to the top after the user submits text?

Thank you,
Charlotte

I'm pretty new to Javascript and just started with some OOP concepts, so this might be an obvious one and I apologize if the question is much longer than it should be...

Basically I am trying to create a reusable class object with several internal functions, that is completely abstracted, meaning the class object itself should never have to reference the global declarations or window object. This class should be aware of itself at any point in the execution of it's own functions, and that is what I'm having trouble with at the moment.

What I'm trying to do is create reusable javascript "Apps" for my HTML web application, where multiple instances can be instantiated and used independently from one another.

My main problem is "this" loses context in the Ajax callback and onclick handlers. I'm not sure how to persist the context of "this", or at least keep a reference to prototype instance itself.

Let's set up a simple class called "App" to demonstrate what I mean...

Code:

var myApp = new App("MyFirstApp");

function App(argName) {
    this.name = argName;
    this.GetDirectory("C:\Program Files");
}

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    Ajax.GetDirectory(argPath, this.GetDirectoryCallback, this.GetDirectoryTimeout, this.GetDirectoryError);
}

App.prototype.GetDirectoryCallback = function(argFilePaths) {
    // "this" equals the "window" object (bad!), meaning this.name should equal a null reference
    // argFilePaths contains a string of file paths (delimited using ;) returned by the server
    var mFilePaths = split(argFilePaths, ";");
    // for each file path, add a div to the document body containing that file path, with an onclick handler
    for (var i in mFilePaths) {
        var mFilePath = mFilePaths[i];
        var mFilePathDiv = document.createElement("div");
        mFilePathDiv.innerHTML = mFilePath;
        mFilePathDiv.setAttribute("onclick", "javascript:this.FilePathDivClickHandler();return false;");
        document.getElementById("body").appendChild(mFilePathDiv);
    }
}

App.prototype.FilePathDivClickHandler = function() {
    // I need a reference to the App object instance here, but I'm not sure where to grab it...
    // what I want to do is call GetDirectory again, referencing the div's innerHTML which contains another file path, like this:
    this.GetDirectory(event.target.innerHTML);
}

The onclick handler using "this" is obviously not going to work because "this" is a reference to the "window" object which does not have a function called FilePathDivClickHandler(). So what I can do is nest the GetDirectoryCallback() function inside the GetDirectory() function so that GetDirectoryCallback() can reference the variables in the outer function (GetDirectory).

Code:

App.prototype.GetDirectory = function(argPath) {
    // "this" equals the App object instance (good!), meaning this.name should equal "MyFirstApp"
    // "this" will still lose context inside the callback, so we can set up a variable called "instance" that the callback can reference
    var instance = this;
    Ajax.GetDirectory(argPath, GetDirectoryCallback, GetDirectoryTimeout, GetDirectoryError);
    function GetDirectoryCallback(argFilePaths) {
        // "this" equals the window object (bad!), meaning this.name should equal a null reference
        // "instance" equals the App object instance (good!), meaning instance.name should equal "MyFirstApp"
        // argFilePaths contains a string of file paths (delimited using ;) returned by the server
        var mFilePaths = split(argFilePaths, ";");
        // for each file path, add a div to the document body containing that file path, with an onclick handler
        for (var i in mFilePaths) {
            var mFilePath = mFilePaths[i];
            var mFilePathDiv = document.createElement("div");
            mFilePathDiv.innerHTML = mFilePath;
            mFilePathDiv.setAttribute("onclick", "javascript:instance.FilePathDivClickHandler();return false;");
            document.getElementById("body").appendChild(mFilePathDiv);
        }
    }
}

Even though we have persisted the App object instance through the use of the "instance" variable in the outer function, the onclick event handler still does not work; when it fires, "instance" is an unknown object.

Would placing the FilePathDivClickHandler() function inside the GetDirectory() function, much like what was done with the callback, allow me to use "instance" correctly for the onclick handler?

I am dynamically appending an img to the inner HTML of an element, to add in help in the form of a clickable icon next to select elements. When the img is added to an anchor the image of course becomes part of the link, and clicking the image invokes the anchor's action. The img has an onclick handler which triggers the dynamic help pop-up. My problem is that I can't seem to block the default anchor action, and thus the anchor is invoked also. The img onclick handler is called before the anchor event is processed (an alert popup will block the anchor's execution until the alert is dismissed), but returning false from it does not block the anchor's action.

Any suggestions? I can move the img element to be a peer of the anchor element instead of a child, but I would like a programmatic fix instead of changing the way it interacts with the DOM if possible.

Thanks.

Hello, So I have two pieces of Javascript attached to my open/close text boxes.

One for the visibility function:
Code:

<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

The other for changinging the image to reflect the text box's status (open of closed):
Code:

<script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>

The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position

I would like it to stop changing the page position onclick. Any help would be much appreciated!

Hello, I am trying to save a dynamically created anchor's id onclick, but I am having a lot of trouble.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
</style>
</head>

<body onload="initAll();">
<div id="test"></div>

<script type="text/javascript">
var xhr = false;			//global xhr variable
var allRequestIds = new Array();
var allRequestDates = new Array();
var allRequestNames = new Array();
var allRequestBriefs = new Array();
var allListLinks = new Array();
var allListItems = new Array();
var linkId;       //global variable for clicked link's id; set to be the same as xml data's id; used to pull more data in next page


function initAll(){
	if (window.XMLHttpRequest){		//initialize xmlhttprequest into xhr variable
	xhr = new XMLHttpRequest();
	}
	else{}//ie stuff goes here
	xhr.open("GET","xml/request.xml",true);		//open connection
	xhr.onreadystatechange=createLinks;				//onreadystatechange call createLinks()
	xhr.send(null);	
}

function createLinks(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			if(xhr.responseXML){
				var allRequests=xhr.responseXML.getElementsByTagName("request");		//save all requests into array
				var newList=document.createElement("ol");                               //create a new ordered list
				for(i=0;i<allRequests.length;i++){                        //arrays of each tag, and an array of links
					allRequestIds[i]=allRequests[i].getElementsByTagName("requestId")[0].firstChild.nodeValue;
					allRequestDates[i]=allRequests[i].getElementsByTagName("date")[0].firstChild.nodeValue;
					allRequestNames[i]=allRequests[i].getElementsByTagName("name")[0].firstChild.nodeValue;
					allRequestBriefs[i]=allRequests[i].getElementsByTagName("brief")[0].firstChild.nodeValue;
					allListLinks[i]=document.createElement("a");            //create an array of links
					allListLinks[i].appendChild(document.createTextNode(""+allRequestDates[i]+" "+allRequestNames[i]+" "+allRequestBriefs[i]+""));    //i don't know how to add a new line within createtextnode!!! wtf?! i wanted to add a <br />
					allListLinks[i].setAttribute("href","somepage.html");
					allListLinks[i].setAttribute("class","dynamicLink");		
					allListLinks[i].setAttribute("onclick","pullDetailed();");
					allListItems[i]=document.createElement("li");             //create an array of list items
					allListItems[i].appendChild(allListLinks[i]);  //append each anchor into each list item
					newList.appendChild(allListItems[i]);          //append all list items into ordered list
				}
				document.getElementById("test").appendChild(newList);      //append list into test paragraph
				
			}
		}
	}
}

function pullDetailed(){
	alert("function pullDetailed called!");	//this is just testing to see if this function has been called on anchor click
	linkId=this.innerHTML.;	//this doesn't work
	alert(linkId);
}
</script>
</body>
</html>

does anybody have an ideas? thank you.

I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href.

Here is the simplified code. Any help is appreciated.Thanks

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(frm){
frm.box2.value = 'sample_value';

}
</script>
<body>
<FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results">
<font size="5">
<b>FIND
</b>
</font>
<hr>
<div class="menu" id="find_block">
<ul>
<li>
<a href="#">DOMAINS
</a>
<ul>
<li>

<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link
</a>
</li>
<li>
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link

</a>
</li>
</ul>
</li>
</ul>
<input readOnly name="box2"/>
<INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button ">
</div>
<br>
<font size="5">
<b>WHERE
</b>
</font>
<hr>
</FORM>
</body>
</html>

Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for.

Thanks

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

Hi guys,

Having a little bit of trouble with a site I'm currently working on...

I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc.

Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:

http://www.mySiteOfFun.com/index.html#page=news.html;

This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).

I can't add a #, because one is already being used to reference the anchor for the content div.


Has anyone run into a similar problem before? If so, how did you resolve it?

Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?

Just not sure how to progress really, and any help would be greatly appreciated!

I'm currently working on a project and I am doing a bunch of image switching.

I'm having a problem with the following...

I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click.

Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already.

What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function.

What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top.

Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure.

question is

Code:

href="javascript:void(null);"

the same as

Code:

href="javascript:void(0);"

if not whats the preferred or standardized use to avoid conflict..

Hi,
So firstly this is likely not in the right place at all, as it's a bit OT but I figured it's the best place to ask..

I have to document 4 different tests to my code; what structure should I take when doing this?

I was thinking:
* State the aim of the test
* State the inputs, and what I believe the output should be.
* State the actual output, and whether this positively or negatively affect my code.