JavaScript - Passing Js Function Variable For Id

Thank you in advance if someone can help. I have been banging my head against the wall for hours now.

Here is the code:

Code:

for (var i = 0; i < BS_crm['activityTypes'].length; i++) {
        var clickFunc = function(){ activityList.showForm( -1, {blockType:[""+BS_crm['activityTypes'][i]['id'], "0"]} ); };
        var type = {
                value: BS_crm['activityTypes'][i]['id'],
                label: "Add New "+BS_crm['activityTypes'][i]['label'],
                css: BS_crm['activityTypes'][i]['css']+"_16",
                onClick: clickFunc
        };
        previewLinks.items.push( type );

}

Now, basically what I am doing here is running through one array to
create an array of objects, that will be used to create links that
will use whatever onClick function I pass it. The problem is that on
the second line I need the BS_crm['activityTypes'][i]['id'] to be a
value, not a reference. If that line was simply changed to:

Code:

var clickFunc = function(){ activityList.showForm( -1, {blockType:["3", "0"]} ); };

then everything would work as I need.

How can I make this happen? I would really appreciate any help.

Thank you again in advance.

I have a function which is currently called twice on the same page. Part of the function is to apply an onkeyup event to a created element. The problem is that when the function is called twice the first created element calls the onkeyup function of the second element!

table_JD.length-1 = 0 for first element
table_JD.length-1 = 1 for second element

updateSearch_TC_JD(1) is somehow called from first element!

Code:

newSearchBox.onkeyup = function() {updateSearch_TC_JD(table_JD.length-1)}

Thanks for any help you can provide!

Hi,

I have a DOM click event that creates a <span>. When the user clicks a button, it turns that <span> into a textarea that the user can type a new name in, press enter, and then the span contains the text the user input. Sort of like when you rename a file in Windows Explorer.

Anyway, the code is something like this, and I'm wondering if I can use 'area_el' in this way... right now it's giving me the error that area_el is undefined, even though I define it in the function that contains the Event declaration.

The first part is the Dom stuff to make it all work. It's not stuff I need to mess with, but I'm putting it here in case it's useful.

Code:

var Dom = {
	get: function(el) 
	{
		if (typeof el === 'string')
			return document.getElementById(el);
		else
			return el;
	},
	add: function(el, dest) 
	{
		var el = this.get(el);
		var dest = this.get(dest);
		dest.appendChild(el);
	},
	remove: function(el) 
	{
		var el = this.get(el);
		if(el.parentNode != null)
			el.parentNode.removeChild(el);
	}
};

var Event = {
	add: function() 
	{
		if (window.addEventListener) 
		{
			return function(el, type, fn) 
			{
		  		Dom.get(el).addEventListener(type, fn, false);
			};
	  	} 
		else if (window.attachEvent) 
		{
			return function(el, type, fn) 
			{
		  		var f = function() 
				{
					fn.call(Dom.get(el), window.event);
		  		};
		  		Dom.get(el).attachEvent('on' + type, f);
			};
	  	}
	}()
};

The following code defines what happens when the user clicks submit to create a polygon. I also have some variables:

Code:

var created_area_array = Array();
var createdarea_index = 0;
var number_of_areas_saved=0;
var currently_renaming=false;
  
Event.add(window, 'load', function()
{
	Event.add('SubmitArea', 'click', function() 
	{
		if(polyPoints.length>0)
			add_created_area();
	});	
});

Finally, where the issue is. I define area_el in the function below, and further down I want to pass it to a function within the "rename" click event, but I get an error that area_el is undefined.

Code:

function add_created_area()
{
	number_of_areas_saved++;
	var area_el = document.createElement('span');
	var area_el_remove = document.createElement('span');
	var area_el_rename = document.createElement('span');
	var new_entry = polyPoints;
	var new_entry_array_index = "Area" + (createdarea_index);
	var new_entry_array_name = "Area #" + (createdarea_index+1);
	area_el.innerHTML = '<span class=\"address-text\">' + new_entry_array_name + '</span><br>';
	
	area_el_remove.innerHTML = "<a onMouseOver=\"rollover('address_remove')\" onMouseOut=\"rollout('address_remove')\" style='cursor:pointer;'>" +
	"<img src=\"images/tabs-icons/normal-address_remove.png\" name='address_remove' title='remove' alt='remove'></a>&nbsp;";
	
	area_el_rename.innerHTML = "<a onMouseOver=\"rollover('area_rename')\" onMouseOut=\"rollout('area_rename')\" style='cursor:pointer;'>" +
	"<img src=\"images/tabs-icons/normal-area_rename.png\" name='area_rename' title='rename' alt='rename'></a>&nbsp;";
	
	created_area_array[new_entry_array_index] = new_entry;
	createdarea_index++;
	
	Dom.add(area_el_remove, 'CreatedAreas');
	Dom.add(area_el_rename, 'CreatedAreas');
	Dom.add(area_el, 'CreatedAreas');
	Event.add(area_el, 'click', function(e) 
	{
		if(!currently_renaming)
		{
			polyPoints = [];
			var thePolyPoints = (created_area_array[new_entry_array_index]).toString();
			
			alert(thePolyPoints);
			
			//formatting created_area_array[new_entry_array_index] to store as polygon points in the polyPoints array
			thePolyPoints = thePolyPoints.replace(/[\[\]{}]/g, "");
			thePolyPoints = thePolyPoints.replace(/Location/g, "");
			
			//adding the co-ordinates to the polyPoints array
			thePolyPoints = thePolyPoints.split(",");		
			for(var ctr=0; ctr+1<thePolyPoints.length; ctr+=2)
			{
				var location1 = new Microsoft.Maps.Location(thePolyPoints[ctr],thePolyPoints[ctr+1]);
				polyPoints.push(location1);
			}
			
			var out="";
			for(var i=0; i<polyPoints.length; i++)
			{
				out += polyPoints[i] + " ";
			}
			alert(out);
			
			//creating the polygon and searching...
			if(create_area==true)
			{
				drawPolygon();	
				polygonSearch();
			}
			else if(create_area==false)
			{
				document.getElementById('createarea').innerHTML = "<a id='createarea'><span class='create_area' style='color:blue'><strong>Create Area</strong></span></a>";
				document.getElementById("mapDiv").oncontextmenu = function(){return false}
				MouseUpHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseup",MouseUpHandler);
				MouseDownHandlerId = Microsoft.Maps.Events.addHandler(map, "mousedown",MouseDownHandler);
				MouseMoveHandlerId = Microsoft.Maps.Events.addHandler(map, "mousemove",MouseMoveHandler);
				MouseOverHandlerId = Microsoft.Maps.Events.addHandler(map, "mouseover",MouseOverHandler);
				drawPolygon();	
				polygonSearch();
				create_area=true;
			}			
		}
	});
	Event.add(area_el_remove, 'click', function(e) 
	{
		Dom.remove(this);
		Dom.remove(area_el_rename);
		Dom.remove(area_el);
		if(number_of_areas_saved>1)
			number_of_areas_saved--;
	});
	Event.add(area_el_rename, 'click', function(e) 
	{
		if(!currently_renaming)
		{
			area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:200px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\" onKeyPress=\"return enter_rename(area_el, event)\" maxlength=\"30\"></textarea><br>';
			currently_renaming=true;
		}
	});
	Event.add("createdarea_clear", 'click', function(e)
	{
		Dom.remove(area_el_remove);
		Dom.remove(area_el_rename);
		Dom.remove(area_el);
		created_area_array = [];
		number_of_areas_saved=0;
		createdarea_index=0;
	});
}

The enter_rename(area_el, event) function that isn't passing in my variable.

Code:

function enter_rename(area_el, event)
{	
	var keyPressed = (event.which) ? event.which : event.keyCode;
	var current_str = document.getElementById("renaming_area").value;
	if(keyPressed == 13)
	{
		if(current_str.length>0)
		{
			if(allSpaces(current_str)==true)
			{
				alert("Please enter a meaningful area name.");
				return false;
			}
			else
			{
				area_el.innerHTML = '<span class=\"address-text\">' + current_str + '</span><br>';
				currently_renaming=false;
				return true;	
			}
		}
		else
			return false;
	}
	else
		return true;
}

Making area_el global does not clear the span elements when I click my "createdarea_clear" button, however when it's local, the function works as expected.

Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element.

it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly?


Here's my Code:

Code:

<script type='text/javascript'>
// Startup Script
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", LoadEventListeners, false);
}

function LoadEventListeners()
{
 var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"];
 
 // Create event Listeners for the alphabetic keys
 for(var x = 0; x < Key_Table.length; x++)
    {
     Key_Table[x] = document.getElementById(Key_Table[x]);
	 
	 Key_Table[x].addEventListener("click",
                         function(){
                          InsertChar(Key_Table[x]);
                         },
                         false);
    }
}

function InsertChar(Char)
{
 alert("Char is:" + Char);
 // Textbox data
 document.getElementById('TextData').value = document.getElementById('TextData').value + Char;
}
</script>

I'm trying to make it so when you click a cell in a table it runs a function based on the value within that cell. With the current code, no matter what cell is clicked, the alert box displays the same number, which is the last number in my array. The variable, princ, is just being overwritten rather than writing code to each the cell with the proper value. Help is appreciated. Thanks.

Code:

for(i=0;i<=3;i++){
	document.writeln('<tr>');
	document.writeln('<th>'+(periodArray[i])+'</th>');
	for(j=0;j<=2;j++){
		princ = principleArray[j][i];
		document.writeln('<td onclick="(calculateInterest(princ,1,1))">$'+principleArray[j][i]+'</td>');
	}
	document.writeln('</tr>');
}

function calculateInterest(principle,rate,period){
	totalInterest = principle * rate * period;
	totalLoanCost = principle + totalInterest;
	alert('Total Interest: '+totalInterest+'\n'+'Total Loan Cost: '+totalLoanCost);
}