JavaScript - Onclick Listener Trouble

Dammit, for some reason this script has stopped working :/

When I click the links with the ID's of "login_dialog" and "register_dialog" a div should be shown... I'm using an event listener to do this.

Code:

function listener_items() {	
	//Text field background
	addEvent(document.getElementById('input_username'), "click", add_username_password);
	addEvent(document.getElementById('input_username'), "blur", remove_username_password);
	addEvent(document.getElementById('input_password'), "click", add_username_password);
	addEvent(document.getElementById('input_password'), "blur", remove_username_password);

	//Switch between forms
	addEvent(document.getElementById('dialog_login'), "click", login_dialog_login);
	addEvent(document.getElementById('dialog_register'), "click", login_dialog_register);
	addEvent(document.getElementById('dialog_recovery'), "click", login_dialog_recovery);

	//Display Dialog
 	addEvent(document.getElementById('login_dialog'), "click", navbar_login);
	addEvent(document.getElementById('register_dialog'), "click", navbar_register); 
	
	//Close Dialog
	addEvent(document.getElementById('close_dialog'), "click", login_dialog_close);
}

//Login dialog, login form input fields background text
var add_username_password = function() { add_input_text(this); };
var remove_username_password = function() { remove_input_text(this); };

//Login dialog buttons
var login_dialog_login = function() { display_form('login'); };
var login_dialog_register = function() { display_form('register'); };
var login_dialog_recovery = function() { display_form('recovery'); };

//Close dialog
var login_dialog_close = function() { display_dialog('login', 'hidden'); };

//Navigation bar buttons
 var navbar_login = function() { display_dialog('login', 'visible'); };
var navbar_register = function() { display_dialog('register', 'visible'); }; 

//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
	if ( elm.addEventListener ) {
		elm.addEventListener( evt, fun, false );
	} else if ( elm.attachEvent ) {
		elm.attachEvent( 'on' + evt, fun );
	} else {
		elm [ 'on' + evt ] = fun;
	}
};

addEvent ( window, "load", listener_items );

//Display/Hide login dialog
 function display_dialog(dialog, fun) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	//Creat array with all forms
	var formsHide = Array("login","register","recovery"); var i = 0;
	
	document.getElementById('wrapper').setAttribute('style', 'visibility:' + fun);
	for ( i = 0; i < formsHide.length; i++ ) {
		if ( formsHide[i] == dialog && fun == 'visible' );
			document.getElementById("dialog_" + dialog).setAttribute('style', active_style);
			document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:visible');
			formsHide.splice(i, 1);
		}
		document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:hidden');
	}
}
 
//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered. 
function add_input_text(obj) {
	var id = obj.id.split("input_");
	document.getElementById(id[1]).innerHTML = '';
}
function remove_input_text(obj) {
	if (obj.value.length == 0) {
		var id = obj.id.split("input_");
		var id2 = id[1].substr(0, 1).toUpperCase() + id[1].substr(1);
		document.getElementById(id[1]).innerHTML = id2;
	}
}
function display_form(form) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	var forms = Array("login", "register", "recovery");
	for ( c = 0; c < forms.length; c++ ) {
		if ( forms[c] == form ) {
			document.getElementById( forms[c] + "_form" ).style.visibility = "visible";
			document.getElementById("dialog_" + forms[c]).setAttribute('style', active_style);
			document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c] + ' active');
			forms.splice(c, 1);
		}
	}
	for ( c = 0; c < forms.length; c++ ) {
		document.getElementById("dialog_" + forms[c]).setAttribute('style', '')
		document.getElementById( forms[c] + "_form" ).style.visibility = "hidden";
		document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c]);
	}
}

HTML:
Code:

<span><a href="#"  id="login_dialog"  style="color:#33CCFF;">Login</a></span>
<span><a href="#"  id="register_dialog" >Register</a></span>

I can't seem to get the event listener to run an event when I focus on the text field with the ID username.

JavaScript:
Code:

function listener_loginForm() {
var fields = Array("username","password");
for ( j = 0; j < fields.length; j++ ) {
	var objs = document.getElementById(fields[j]);
	for ( var i = 0; i < objs.length; ++i ) {
		var elm = objs [ i ];
		elm.onblur = function() { display_text_bg(this); };
		if (elm.Id = "password") {
			elm.onfocus = function() { switch_field(this); };
		}
	}
}
}

//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
	if ( elm.addEventListener ) {
		elm.addEventListener( evt, fun, false );
	} else if ( elm.attachEvent ) {
		elm.attachEvent( 'on' + evt, fun );
	} else {
		elm [ 'on' + evt ] = fun;
	}
};
addEvent ( window, "load", listener_loginForm );

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered. 
function display_text_bg(obj) {
		alert("remove text");
}
function switch_field(obj) {
		alert("switch");
}

HTML:
Code:

	<form name="login" class="login">
        	<label for="username">Username: </label><br />
        	<input type="text" name="username" id="username" />
            <br /><br />
            <label for="password">Password: </label><br />
            <input type="text" name="password" id="password" />
            <br /><br />
            <label for="remember">Remember Me? </label><br />
            <br />
            <span class="remember">
            	<span class="text">Never</span>
            	<input type="hidden" value="never" name="rememberme" />
                <ul>
                	<li>Never</li>
                    <li>24 Hours</li>
                    <li>1 Week</li>
                    <li>Always</li>
                </ul>
            </span>
        </form>

Hi I have some code but have no skills so need a lot of help here is what I have



Code:

<script type="text/javascript"><!--
alert(window.clipboardData.getData ('Text' ))
{if  (1,2,3,4) //repeats 4 times
  {
  //open 1.exe
  }
else if (5,6,7,8) //repeats 4 times
  {
   // open 2.exe
  }else if (9,10,11,12) //repeats 4 times
  {
   // open 3.exe
  }
else
  {
  // 
  }
//--></script>

I need to get it to listn for sertan words and numbers and make a decision on what file to open the .exe files. It needs to recognise when the info has changed in the clipboard

Please help <- thats me

Please can someone explain to me in simple terms which this actually does.

From what I understand it will check all events until a defined event happens, such as rollover of a certain image, and then it activates a function?

What I want to do is use this so that when I rollover a element such as below:
Code:

<img src="img url" alt="this is a tooltip" tooltip="true" />

I want it to pass the obj to a function which then runs, and then once the mouse of not over that element it will activate another function passing the previous object to this function.

Although an element such as the example below would not activate these functions:
Code:

<img src="img url" alt="this is a tooltip"/>

As the tooltip tag does not exist or has the value of false...


Also, wouldn't this use a lot of resources as it checks every event which the mouse passes over?

I have more than 30 addEvent listeners i need to add to my WebApp. But the Code to dynamically add them is not working, unless change:

Code:

 AddItemEvtAry[x].addEventListener('click', function (e) {document.getElementById("text" + x).value ++}, false);

to

Code:

 AddItemEvtAry[x].addEventListener('click', function (e) {document.getElementById("text0").value ++}, false);

but obviously hardcoding all of those DIV IDs would defeat the purpose of the code.


Code in Question:
Code:

	// Event Listeners for Incrimenting Quantities
	var AddItemEvtAry = [40];
	
	for(var x = 0; x < 39; x++)
	     {
	       AddItemEvtAry[x] = document.getElementById("AddItem" + x);
	     }
	     
	 for(var x = 0; x < 39; x++)
	     {
	       AddItemEvtAry[x].addEventListener('click', function (e) {document.getElementById("text0").value ++}, false);
	     }

I'm trying to simulate a textfield on a canvas; that is when clicking on the text box a cursor appears and blink. My problem here is when I create more than one object, the event listener will work only on the last object created.

Here is my code:
Javascript
Code:

var canvas;
var ctx;
var MousePosX;
var MousePosY;
var Cursor_Width = 1;
var Cursor_Height = 21;
var Height = 27;
var LapseTime = 800;

function init(CanvasName) {
	canvas = document.getElementById(CanvasName);
	ctx = canvas.getContext("2d");
}

/*
Create Textfiled
*/
function Textfield(x, y, w) {
	Textfield.prototype.x = x;
	Textfield.prototype.y = y;
	Textfield.prototype.w = w;
	Textfield.prototype.Cursor_PosX = x + 3;
	Textfield.prototype.Cursor_PosY = y + 3;

	// draw rectangle
	ctx.beginPath();
	ctx.rect(this.x, this.y, this.w, Height);
	ctx.closePath();
	ctx.stroke();

	// listen for mouse click event
	canvas.addEventListener("mousedown", function(evt) { 
		// calculate mouse coordination on canvas
		MousePosX = evt.clientX - canvas.offsetLeft;
		MousePosY = evt.clientY - canvas.offsetTop;
		// if mouse coordination is within texfield display cursor
		if((MousePosX > Textfield.prototype.x && MousePosX < (Textfield.prototype.x + Textfield.prototype.w)) && (MousePosY > Textfield.prototype.y && MousePosY < (Textfield.prototype.y + Height))) { 
			Textfield.prototype.cursor();
		}
	});
}

/*
Cursor for textfield
*/
Textfield.prototype.cursor = function() {
//	alert("good");
	ctx.beginPath();
	ctx.strokeStyle = "black";
	ctx.rect(this.Cursor_PosX, this.Cursor_PosY, Cursor_Width, Cursor_Height);
	ctx.closePath();
	ctx.stroke();
	setTimeout("Textfield.prototype.animate_cursor()", LapseTime);
};

/*
Change color of cursor to white to make blinking effect
*/
Textfield.prototype.animate_cursor = function() {
	ctx.strokeStyle = "white";
	ctx.stroke();
	setTimeout("Textfield.prototype.cursor()", LapseTime);
};

HTML
Code:

<!DOCTYPE HTML>
<html>
    <head>
        <style>
           	#MyCanvas {
                border: 1px solid #000000;
            	}
        </style>
	<script src="widgets1.js"></script>
	<script>
		window.onload = function () {
			init('MyCanvas');
			var tf1 = new Textfield(10.5, 10.5, 150);
			var tf2 = new Textfield(10.5, 50.5, 150);
		};
	</script>
    </head>
    <body>
	<br /><br /><br />
        <center>
		<canvas id="MyCanvas" width="700" height="500">
		</canvas>        
	</center>
    </body>
</html>

What i want to achieve here is have my event listener on any textfield created on the canvas.

Hello!

I'm working with nested functions and trying to pass a 'this' value to an anonymous being used in an assignment for an event listener. Here's the basics of my code:

Code:

<div id='abc'></div>
<script type='text/javascript'>
var abc = function () {
    this.myFunction = function() {
        var myObj
        myObj = document.createElement("input");
        myObj.setAttribute("type", "button");
        myObj.setAttribute("value", "Click Me");
        myObj.addEventListener("click", function () {
            this.doDing();
        }, false);
        document.getElementById('abc').appendChild(myObj);
    }
    this.doDing = function () { alert('ding'); }
}
var myInstance = new abc();
myInstance.myFunction();
</script>

So, this should plop a button inside our DIV and when clicked I'd like it to run the alert-ding; unfortunately it seems to want to run the function as defined under the buttons object which doesn't work out too well.

Any suggestions?

Thanks!

Hello;
I am testing some code that finds and element and attempts to add an event handler attribute to it as 'onclick' (test case in Firefox 3.5.9)
/*
The actual code is:
window.onload = function()
{
//<irrelevant code>
var test = document.getElementById('tstEl');
test.setAttributeNode('onclick');
test.setAttribute('onclick', "alert(\"Don\'t get testy\")");
}
*/
The error per the js console in Firefox is:
Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLInputElement.setAttributeNode]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.6/<pathInfo>/SC_branch2_dev.php :: anonymous :: line 35" data: no]

I am trying to do this because Element.addEventListener or Element.attachEvent won't allow for arguments to be passed to the event handler code/function. What is going on here? The only line referenced, line35, in the document text containing javascript code is irrelevant to the problem.
Thank you for time, interest and attention;
WhoEverIReallyAm

hello,

I am trying to add a window event listener on some links in a loop instead of doing them one by one. I've tried

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=changeIframeSrc(src, 'solid',1, event);
document.links[i].onmouseout=changeIframeSrc(null,'none',0,event);
	}
}

and

Code:

function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=function(a1,a2,a3,a4){
		return function(){changeIframeSrc(a1,a2,a3,a4);}
 }(src, 'solid',1, event);
 	}
}

but the event keeps coming up undefined. Any ideas on how to do this?

This code is finally working, but for some reason no matter which button i click on, it is always returning "9". It should be firing the alert(x), where x is the x index value for that particular addEventListener

Code:

.addEventListener('click', function (e) {alert(x);},

Code:

<html>

<script type="text/javascript">

document.addEventListener('DOMContentLoaded', DOMLoadedEventFunction, false);

function DOMLoadedEventFunction ()
{
for(var x = 0; x < 9; x++)
   {
    document.getElementById('btn' + x).addEventListener('click', function (e) {alert(x);}, false);
   }
}


</script>


<body>

<input type="button" id="btn0" value="1">
<input type="button" id="btn1" value="2">
<input type="button" id="btn2" value="3">
<input type="button" id="btn3" value="4">
<input type="button" id="btn4" value="5">
<input type="button" id="btn5" value="6">
<input type="button" id="btn6" value="7">
<input type="button" id="btn7" value="8">
<input type="button" id="btn8" value="9">
<input type="button" id="btn9" value="10">



</body>
</html>

This is just some sample code that i will later turn into an HTML5 File Manager

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.

Is it possible disable an onclick after clicking it and then enable it from another onclick by id

Code:

<img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;">

This code runs when it is clicked:

Code:

$("#one").click(function() {
			
				runEffectB();
			
			
			
			return false;
		});

What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run.
I am assuming I will be able to re-enable it from another onclick running a similar function.
This is jquery and jquery ui if that helps.
Any ideas much appreciated.

i am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work.

it is strange because it works fine when i replace them with "keypress" and "blur"

Code:

<iframe id="iframe"></iframe>

<script>

frameobj=document.getElementById('iframe').contentWindow; 

// IE
frameobj.attachEvent('onpropertychange', function(){alert();} );

//FireFox
frameobj.addEventListener('input', function(){alert();} , false);

</script>

hi everybody..


i have this simple code:

Quote:
<html>
<head>
<script language="javascript" type="text/javascript">
document.write("<input type='button' value='push' onclick='hi()'/>");
function hi() {
alert("hi");
document.write("<input type='button' value='enter' onclick='javascript: bye()'/>");




}
function bye() {
alert("bye");


}
</script>
</head>


<body>




</body>
</html>


if i try to run it on chrom its works well..

but on IE or FireFox its not define the bye() function..

whats the reason?! and how i can solve it?..

thanks very much..