|
JavaScript - Passing 'this' To An Anonymous Function In An Event Listener
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! Similar TutorialsThis 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 HTML CODE BELOW (JAVASCRIPT CODE FOLLOWS); Code: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Text Object value Property</title>
<script type="text/javascript" src="../jsb-global.js"></script>
<script type="text/javascript" src="jsb-11-02.js"></script>
</head>
<body>
<h1>Text Object value Property</h1>
<form id="UCform" action="make-uppercase.php">
<p>
<input type="text" id="converter" name="converter" value="sample">
</p>
</form>
</body>
</html>
This program below switches what is entered into the text filed to caps when hitting the enter button or the tab button. Can someone explain to me why it is not working. The answer would be helpful to a newbie who's trying hard to learn the fundamentals... Code: // initialize when the page has loaded
window.onload = initialize;
var oInput; // (global) input field to make uppercase
// apply behaviors when document has loaded
function initialize()
{
// do this only if the browser can handle DOM methods
if (document.getElementById)
{
// apply event handler to the button
oInput = document.getElementById('converter');
if (oInput){
var event = oInput.onchange;
upperMe(event);
}
// apply event handler to the form
var oForm = document.getElementById('UCform');
if (oForm)
{
var event = oForm.onsubmit;
upperMe(event);
}
}
}
// make the text UPPERCASE
function upperMe(evt)
{ // consolidate event handling
if (!evt) evt = window.event;
// set input field value to the uppercase version of itself
var sUpperCaseValue = oInput.value.toUpperCase();
oInput.value = sUpperCaseValue;
// cancel default behavior (esp. form submission)
// W3C DOM method (hide from IE)
if (evt.preventDefault) evt.preventDefault();
// IE method
return false;
}
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> 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 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>
here the deal ,,I've solved all but this problem in my script i have my page setup with 1 iframe and the main html the code below is exactly how the page will show up in the iframe, you can copy and paste the whole thing and save it as a htm file to view if needed.. I need a way to catch the clicks that happen within the iframe but from the main section of the page..heres why! this is inserted at the top of the page if(top.location==self.location){top.location="RefESI_search.asp";} just above top.document.reset.RefCat.value= I can get the page to load even with this in the iframes ..but for the purposes of this i left it out so the page would load ok for anyone thats gonna try and help . theres only 2 links in the code.. hopefully whatever will hopefully solve this problem will be able to tell which links were clicked,and i can can point them to the apropriate links. I've looked thru alot of the threads so i know there are some extremely brite ppl in here that can knock this problem out of the ball park very easily.. you can grab the styles sheet from here https://www.docs.sony.com/reflib/Style_esi.css Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ref_Lib_Results</title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script language="javascript">
top.document.reset.RefCat.value="Home Receiver";
top.document.reset.NarrowRef.value="Good";
top.document.reset.criteria.value="stra";
top.document.reset.searchscope.value="model";
top.document.reset.companyscope.value="SONY";
top.document.reset.company.value="SONY";
if(""==""){top.reset();}
function popUp(URL,Name) {
var day = new Date();
var id = "page" + Name;
window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=600,height=600");
}
function launchjsmanuals(flag, x, y, z, id) {
//var myTypeLib = new ActiveXObject("Scriptlet.Typelib");
//var GUID = new String(myTypeLib.guid).substr(1,8);
//var endguid = new String(myTypeLib.GUID).substr(25,10);
if((x.indexOf("CHM")!=-1) || (x.indexOf("chm")!=-1)){
alert("You will be prompted to download a file\n\nClick Open - Do NOT click Save");
}
var whnd = "page" + id; //+ GUID + endguid;
var URL = '_manualusage.asp?flag='+flag+'&manual=' + x + '&user=' + y + z + '&manualid=' + id;
if(flag!=""){
whnd = window.open(URL,whnd, "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}else{
whnd = window.open(URL,"Loader", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}
}
function emailit(id, url,name,type,filesize,model,email,custname,cs3event,user){
var namestring = name;
var re = new RegExp('&','gi');
namestring = namestring.replace(re,'and');
name = namestring;
var xurl = "/srvs/common/email.asp?id="+id+"&emailurl="+url+"&title=" + name + "&type="+type+"&model=" + model + "&filesize=" + filesize + "&email=" + email + "&custname=" + custname + "&convid=" +cs3event + "&user=" + user;
popUp(xurl,id);
}
function NarrowSearch(what,value,cat){
switch(what){
case "Category":
parent.document.SearchForm.RefCat.value=value;
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "Model":
if("Home Receiver"!=""){
parent.document.SearchForm.RefCat.value="Home Receiver";
}
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "ONLY":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="Only";
parent.document.SearchForm.submit()
break;
case "ALL":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="ALL";
parent.document.SearchForm.submit()
break;
}
}
</script>
</head>
<body>
<div id="results">
<div style="height: 400px;border-bottom:1px solid black;"
class="modelblock">
<div style="margin-left:20px; margin-right:15px; margin-top:10px; font-size:10pt">
<span style="float:Right;margin-top:10px;text-align:right">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<div style="background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer" onclick="javascript:NarrowSearch('ALL','stra','Home Receiver')">Display All Models</div>
</td><td> </td><td><div style="width:40px;background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer;text-align:center" onclick="javascript:history.go(-1)">Back</div></td></tr></table></span><b>Your search of "<font color=green>stra</font>" matches 66 Models in the Home Receiver category.</b><br><br>Please select the specific model to continue:<table border=0 cellpadding=0 cellspacing=2><tr><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1000','Home Receiver')"><b>STRA</b>V1000</a></td><td width=15px></td><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1010','Home Receiver')"><b>STRA</b>V1010</a></td><td width=15px></td></tr></table</div></div></div>
<iframe name="Loader" id="Loader" src="blank.htm" style="display:none;height:150px;width:100%;border:1px solid silver"></iframe>
<a onclick="document.getElementById('Loader').style.display='';">*</a>
<script language="javascript">
//alert(parent.IQ.location.href);
</script>
</body>
</html>
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. Hi Everyone, How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below. Code: var start = new Image(); start.src = "start.jpg"; ctx.drawImage(start, 50, 50); 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? Hi All, I'm trying to convert an anonymous function to a real function (nesting is getting out of hand), however the msg object becomes undefined after conversion. Here is the converted anonymous function which fails: https://gist.github.com/2587613 and here is the original anonymous function which works: https://gist.github.com/2587667 Any help would be greatly appriciated What I want to do is have a two-dimension array where some of the elements point to the value in another element. I have done this successfully in PHP using referfences (=&) and now I want to do it in JavaScript. My JS skills are limited but I found this post explaining how it can be done - http://stackoverflow.com/a/1687183 Here's the code from that - Code: Function.prototype.toString = function() {
return this();
}
var x = 1;
var y = function() { return x }
x++;
alert(y); // prints 2
It looks like it will do what I need to do. However, I want to use a two-dimension array, and if I try this it doesn't work - Code: for (var a = 2; a <= 5; a++)
for (var b = 1; b < a; b++)
matrix[a][b] = function() { return (matrix[b][a]) };
matrix is the two-dimension array which is alreay set up with some values. The two for loops are structured to fill in the rest of the values as references to existing values (it's a 5 x 5 array). The problem is coming from function() { return (matrix[b][a]) } because instead of the values for a and b being used in the creation of the anonymous function the actual variable names are used instead. Then later when I attempt to read one of the values setup by this it is "undefined" because the anonymous function is tries to return matrix[a][b] rather than matrix[4][2]. Can anyone help? Thanks! Hello, I'm hoping someone can help me with this. I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example - http://www.cems.uwe.ac.uk/~r4-george...g/products.php Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages. Here is the index.php PHP Code: <?php # index.php /* * This is the main page. * This page includes the configuration file, * the templates, and any content-specific modules. */ // Require the configuration file before any PHP code: require_once ('./modules/config.inc.php'); // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'about': $page = 'about.inc.php'; $page_title = 'About This Site Again'; break; case 'products': $page = 'products.inc.php'; $page_title = 'Products on this site'; break; case 'this': $page = 'this.inc.php'; $page_title = 'This is Another Page.'; break; case 'that': $page = 'that.inc.php'; $page_title = 'That is Also a Page.'; break; case 'contact': $page = 'contact.inc.php'; $page_title = 'Contact Us'; break; case 'search': $page = 'search.inc.php'; $page_title = 'Search Results'; break; // Default is to include the main page. default: $page = 'main.inc.php'; $page_title = 'Site Home Page'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'main.inc.php'; $page_title = 'Site Home Page'; } // Include the header file: include_once ('./includes/header.inc'); echo "<div id=\"content\">"; // Include the content-specific module: // $page is determined from the above switch. include ('./modules/' . $page); // Include the footer file to complete the template: include_once ('./includes/footer.inc'); ?> It uses the .inc.php files located in the modules folder to switch between pages. Here is my products.inc.php - PHP Code: <? include("includes/db.php"); include("includes/functions.php"); if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){ $pid=$_REQUEST['productid']; addtocart($pid,1); header("location:shoppingcart.php"); exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Products</title> <script language="javascript"> function addtocart(pid){ document.form1.productid.value=pid; document.form1.command.value='add'; document.form1.submit(); } </script> </head> <body> <form name="form1"> <input type="hidden" name="productid" /> <input type="hidden" name="command" /> </form> <div align="center"> <h1 align="center">Products</h1> <table border="0" cellpadding="2px" width="600px"> <? $result=mysql_query("select * from products"); while($row=mysql_fetch_array($result)){ ?> <tr> <td><img src="<?=$row['picture']?>" /></td> <td> <b><?=$row['name']?></b><br /> <?=$row['description']?><br /> Price:<big style="color:green"> £<?=$row['price']?></big><br /><br /> <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" /> </td> </tr> <tr><td colspan="2"><hr size="1" /></td> <? } ?> </table> </div> </body> </html> This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work. Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following - Quote: Uncaught TypeError: Cannot set property 'value' of undefined addtocart index.php:51 (anonymous function)index.php:83 onclick Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem. If you need any of the code from other pages I can post it too. Thanks in advance. I've been going through this great tutorial on how to implement a type-ahead feature on a text field and there's something which hopefully you guys can explain. On the third page there is this function. Code: AutoSuggestControl.prototype.init = function () {
var oThis = this;
this.textbox.onkeyup = function (oEvent) {
if (!oEvent) {
oEvent = window.event;
}
oThis.handleKeyUp(oEvent);
};
};
What I don't understand is this line: this.textbox.onkeyup = function (oEvent) { I know about anonymous functions, but I don't know where the value for the parameter oEvent is going to come from. Can someone explain this? Thanks! :) Hey all, I am confused about the true difference between the two below examples. Code: first example:
// Demonstrating a problem with closures and loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = function() {
document.write(theItem + “ < br / > ”);
}
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}
Here we iterate through the length of myArray, assigning the current index of myArray to theItem variable. We declare closureArray 4 times as an anonymous function. The anonymous function in turn declares the predefined write() function, which is passed parameters. Since write() is in closureArray() a closure is created??? During each iteration, theItem is reassigned its value. The four closures reference this value. Since they reference this same value and since this value is reassigned ultimately to the value of the fourth index position, tHe time we execute closureArray later on, all four closures output the same string. This is because all four closures are within the same scope "the same environment" and therefore are referencing the same local variable, which has changed. I have a couple of problems with this example: 1) I thought a closure is a function that is returned - the inner function is not returned above. 2) theItem is not even a local variable of the parent function (closureArray) - I thought in order for a closure to work, the inner function only accesses the local variables of the outer function, but in this case the local variable is defined OUTSIDE of the parent function. 3) The guy says the "the four closures are sharing the same environment." The thing is even in the second example, they are sharing the same environment. Second example: Code: // A correct use of closures within loops
var myArray = [“Apple”, “Car”, “Tree”, “Castle”];
var closureArray = new Array();
function writeItem(word) {
return function() {
document.write(word + “ < br / > ”);
}
}
// Loop through myArray and create a closure for each that outputs that item
for (var i = 0; i < myArray.length; i++) {
var theItem = myArray[i];
closureArray[i] = writeItem(theItem);
}
// Loop through the closures and execute each one.
for (var i = 0; i < closureArray.length; i++) {
closureArray[i]();
}
Here we iterate over the length of myArray (4 times), assigning the index of myArray to theItem variable. We also return a function reference to the closureArray during each iteration (closureArray[i]), where i is index number so we assign 4 functon references. So when we iterate through myArray, we immediatelly call the writeItem() fucntion passing an argument of theItem at its current value. This returns a child anonymous function and when that child function is called, it will execute a block that calls the predefined write() method. We assign that returned anonymous function to the variable closureArray. Hence, closureArray holds a reference to that anonymous function. So closureArray during each iteration holds a reference to the anonymous function and we later call closureArray, which in turn calls the anonymous function, therefore calling the predefined write() function to output the local variable of the parent function. This outputs each distinct index of myArray. QUESTION: This is because since we created the closure, when we call writeItem, passing theItem argument, since theItem is a local variable of the parent function of the closure, it is never destroyed when we later call closureArray (the reference to the child anonymous function)? Yet weren't we using a closure in the first example as well? So whey wasn't those variables preserved? I don't think it has anything to do with assigning a returned anonymous function to closureArray. Even though an anonymous function creates a new memory position in the javascript engine, therefore not overwriting the other function references we create during the iteration, it's still referring to a local variable declared outside the reference. So if it's about the closure retaining value of parent's local variable even after exiting the parent function allowing for the current indexes to be preserved, then why did the closure in the first example fail to retain each index? Thanks for response Need help please...new to JS On Form submission, I am trying to pass a variable (var radioValue, which is the RadioButton selection) as Opt Label in the _gaq.push event tracker (google analytics)as follows onclick="_gaq.push(['_trackEvent', 'Visitor', 'Submit', radioValue]);" However radioValue value is not getting passed Code snippets are attached below. Not sure whether the problem is in the JS function or whether i am calling the var incorrectly in the _gaq.push script...Thank you The radioValue is captured in the overall form validation function as below. Hari ------------------------------------------------------------- (in HTML head) /////other overall form functions var radio_choice = false; for (counter = 0; counter < document.form.RadioGroup.length; counter++) { if (document.form.RadioGroup[counter].checked == true){ radio_choice = true; radioValue=(document.form.RadioGroup[counter].value); } } if (!radio_choice) { alert("Please select again."); return (false); } /////other overall form functions ------------------------------------------------------------ RadioButton Input script (in HTML body) <input name="RadioGroup" value="abc1" type="radio" />abc1</td><td> </td></tr> <input name="RadioGroup" value="abc2" type="radio" />abc1</td><td> </td></tr> <input name="RadioGroup" value="abc3" type="radio" />abc1</td><td> </td></tr> I'm having trouble passing an array into an event handler. This does not work: Code: var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]
function changetextimage(arr){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (arr[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
$('#lightbulbpicture').mouseover(changetextimage(lightbulb));
$('#bananapicture').mouseover(changetextimage(banana));
This does work: Code: var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]
function changetextimage1(){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (lightbulb[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
function changetextimage2(){
for(var i=0;i<5;i++){
var pixel = document.getElementById("text"+i);
if (banana[i]) {
pixel.style.color="#000000";
}
else {
pixel.style.color="#FFFFFF";
}
}
}
$('#lightbulbpicture').mouseover(changetextimage1);
$('#bananapicture').mouseover(changetextimage2);
I have a whole bunch of these arrays (which are much longer) that I want to pass into this function so I just want to pass each as an argument rather than write each function out. I bolded the areas I'm talking about so it's easier to see. I have added an event listener to a LI item in the DOM: liNode.addEventListener("mouseover", mouseOn, true); The mouseOn function: function mouseOn(e) { // Test for IE or Firefox var e = (!e)?window.event:e; var yPos; if (e.pageY) { yPos = e.pageY; } else { yPos = e.clientY; } } I would like to pass in another parameter to the mouseOn function in addition to the event that is passed in automatically. Is there a way to do this? |
|||||||