JavaScript - Addeventlistener And Member Functions

I have created this statement and it does its job but not very efficient.

How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page.

Locate id get value and use same value to change the bgColor of the page
Code:

<input id="red" value="red">red
<input id="green" value="green">green

<script>
document.getElementById('red').addEventListener('click', function (e) { 
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>

Your help will be much appreciated! Thanks!

Code:

function offPar(){
   alert(this.offsetParent.id);
}

function init(){
var mine = document.getElementById("mid");
var other = document.getElementById("inner");

mine.addEventListener("click", offPar, false);
other.addEventlistener("click", offPar, false);

}

window.addEventListener('load', init, false);

HTML :
<div id = "content"> 

 <div id = "mid"> 
    <div id = "inner">
       <p class = "par">
       </p>
    </div>
 </div>

</div>

I can add an event listener to the #mid div but I can't to the #inner div.
Anyone now why this is? Sorry I can't provide more info. That's all I Know!

TTFN
John

On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this:

igevt=function(evt){checkclosegal(evt)}
window.addEventListener('keypress',igevt, false)

and checkclosegal:

function checkclosegal(evt)
{

if(evt.keyCode==27)
{
closebgeagal()
window.removeEventListener('keypress',igevt, false)
}

}


This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks!

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>

Hi there

Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this...

Code:

<div id="iAmTheTargetId">
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

and simply running that would then create the equivalent of doing

Code:

<div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)>
</div>
<div id="iWillHoverOverYouId">
</div>
<script type="text/javascript">
	var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve

Code:

/*
 * triggerId
 * the element in which the attributes will be applied to
 * 
 * hoverBoxid
 * the element in which will hover around the triggerId
 */
function hoverBox(triggerId,hoverBoxid){
	this.triggerElement = document.getElementById(triggerId);
	this.hoverBoxElement = document.getElementById(hoverBoxid);
	 
	if(this.triggerElement == null || this.hoverBoxElement){
		return null;
	}
	
	self = this;
	alert(this.triggerElement);
	this.triggerElement.addEventListener('mouseover',function(){self.activate();},false);
	this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false);
	this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false);
}

hoverBox.prototype = {
		triggerElement : null,
		hoverBoxElement : null,
		state	: false
};

hoverBox.prototype.activate = function(){
	this.state = true;
};

hoverBox.prototype.deactivate = function(){
	if(this.state != false){
		this.hoverBoxElement.style.display = "none";
		this.state = false;
	}
};

hoverBox.prototype.update = function(evt){
	if(this.state != false){
	  	this.hoverBoxElement.style.display = "block";
	  	this.hoverBoxElement.style.position = "absolute";
	  	this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px";
	  	this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px";
	}
};

A quick note theses function will work by them selfs if you just do
Code:

<div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)">
</div>
<div id="hover">
</div>

<script type="text/javascript">
	var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId');
</script>

But not quite what I'm after i would like not to have to enter in
Code:

onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)"

and have that done by the JavaScript


Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me

Good day!
Here is the problem, setting the slider to the site, here's an example:
http://wowslider.com/best-jquery-sli...near-demo.html
and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides.
When you see the code generates this error:
Uncaught TypeError: Cannot read property addEventListener' of undefined
I do not know what this error, help, error on this site:
http://uh219381.ukrdomen.com/
Or here's the code:
http://uh219381.ukrdomen.com/themes/...1/wowslider.js


sorry for my English

Hi,

I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working.

The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong?

Code:

function testWrapper()
{

function frequencyWrapperOne()
{
	var numberArrayOne = new Array(0,0,0);
	for (var i = 0; i < 1000; i = i + 1)
	{
		var chosenNumber = Math.floor(Math.random() * 3); 
		if (chosenNumber == 0)
		{
			numberArrayOne[0] = numberArrayOne[0] + 1;
		}
			if (chosenNumber == 1)
			{
				numberArrayOne[1] = numberArrayOne[1] + 1;
			}
				if (chosenNumber == 2)
				{
					numberArrayOne[2] = numberArrayOne[2] + 1;
				}
					
	}		
	return window.alert(numberArrayOne.join(','));
	
}
}	
testWrapper();

Thanks.

Is there a way to activate a function from another function? It has to be in the script tag, it can't be in the HTML section. Can I use something similar to this following code? If not, can anyone give me some help? I have tried to do it various ways, and have looked it up a few times, but to no avail. Can I use something similar to this following code? If not, can anyone give me some help?

if (condition)
{activate functionname();}

Any help I can get would be appreciated. Thanks a lot to anyone who can help.

Ok here is what I have so far, my ending part of my Call Function I think is ok.

for my main function. I think I misplaced the { and }

I will show you all the codes I have

for my main function

this is what I have


I think I did misplace something but I can not pin point where that one small things should be


Code:

unction showResults(race,name,party,votes)
	{ 					// script element to display the results of a particular race
var totalV = totalVotes(votes);
document.write("<h2>" + race + "</h2>");
document.write("<table cellspacing='0'>");
document.write("<tr>");
document.write("<th>Candidate</th>");
document.write("<th class ='num'>Votes</th>");
document.write("<th class='num'>%</th>");
document.write("</tr>");
	}
	
	
for (var i=0; i < name.length; i++)
{
document.write("<tr>");
document.write("<td>" name[i] + "(" + party[i] + ")</td>");
document.write("td class='num'>" + votes[i] + "</td>");
 
var percent=calcPercent(votes[i], totalV)
 
document.write("<td class='num'>(" + percent +"%)</td>");
 
createBar(party[i],percent)
document.write("</tr>");
}
document.write("</table>");
}
</script>

Just wondering if i misplaced any ; or { or } anywhere suggestions?


Here is my call function
Code:

<script type="text/javascript">
	
showResults(race[0],name1,party1,votes1);
showResults(race[1],name2,party2,votes2);
showResults(race[2],name3,party3,votes3);
showResults(race[3],name4,party4,votes4);
showResults(race[4],name5,party5,votes5);
  
</script>

I been going over this, I can not seem to figure out what { i might be missing?
Thanks

Hello good folks of CodingForums.com. I'm not a coder, but I have a problem that perhaps one of you might be interested in helping me solve.
I run a forum (using SimpleMachinesForum software) and one of the members started vandalizing it. I banned him, by adding his IP address to the ban list. I just found out today (buy looking at a log file) that he is accessing the site many times daily as a guest, and frankly, the guy's such a jerk, I (at first) wanted to block him.

I used a "deny from xxx.xx.xxx" command on the htaccess file... BUT....
This guy is a REAL jerk. I mean... seriously.

So here's what I want to do, and please tell me if (and how) it is possible:

Whenever he tries to access my forum, I want him, and ONLY him, to be re-directed to some embarrassing website (something with a very loud autoplay file or multiple windows).

Can this be done? My coding knowledge is ZERO, but the guy I run the forum with has some basic skills.

Many thanks to any who respond.

Hi guys, I am facing the above problem for a chatroom app that I am making. People will enter and exit the room any time they want, so i need a member list that updates itself to reflect this on the screen of all users that are in the chatroom.

What i have thought of, is to have JS call a PHP function on specific intervals, and that PHP function will retrieve user data from a database and pass it to JS to display on the list. Is this method advisable? Are there any more suitable ways of doing this?

I am thinking of applying the same theory for displaying and retrieving chat messages, but i get the feeling that something's missing for this, or maybe this method is not right for displaying messages.

In my discovering more about OOP with javascript, I ran into the following oddity:

The following doesn't work as expected inside an object constructor:

Code:

var MyClass = function() {
  this.myvalue = "abc";
  document.getElementById('clickable').addEventListener('click', this.clickHandler, false);
}

MyClass.prototype.clickHandler = function(evt) {
   alert(this.myvalue);  // "undefined" - even though I set it to "abc" in the constructor??!!!???!!!!
}

But this works as I would expect:

Code:

var MyClass = function() {
  this.myvalue = "abc";

  var self = this;
  document.getElementById('clickable').addEventListener('click', function(evt) { self.clickHandler(evt); }, false);  //Lamda function.
}

MyClass.prototype.clickHandler = function(evt) {
   alert(this.myvalue);  // "abc" - as expected.
}

So, why does the second example work as expected and the first does not? My (assumed) logic tells me that the object pointed to by "this" in the first example already exists at the point where addEventListener is called, therefore this.clickHandler is a valid reference ... but it doesn't seem to work unless I use the intermediate lamda function, as per the second example. I don't get it.

.


Why do we have functions without parentheses at times?

Ex 1)
http://www.youtube.com/watch?v=OHYFNDzlDTE (On 2:18)


Ex 2)

At the bottom:
Code:

var panel, flag;

function mousemoveResponse(e)
{ 
 var x, y;

  if( window.event )
  { 
    x= event.x; y=event.y; 
  }
  else if(e)
  { 
    x=e.pageX; y=e.pageY; 
  }

  if(flag)
  {
    panel.innerHTML = "Mouse is at X: " + x + ", Y: " + y ; 
  } 
}

function mouseoverResponse()
{  
  flag = false; 
  panel.innerHTML = "Mouse is Over"; 
}

function mouseoutResponse()
{ 
  flag = true ;
}

function init()
{
 panel=document.getElementById("panel");
 flag = true;
 panel.innerHTML="Move the mouse..." ;
 
 document.onmousemove=mousemoveResponse;
 panel.onmouseover=mouseoverResponse; 
 panel.onmouseout=mouseoutResponse; 

}
 onload=init; 

I need to input the functions for the buttons ( Push, Pop,Peek, Enqueue, and Dequeue) nothing I try works. Can anyone possible help me with one of the push, pop or peek, and then one of the Enqueue or Dequeue (any information I see online always has to do with wordpress which im not using) . Im really not asking for someone to do all the work for me, I just need a start. ok here is my code with the buttons just no functions


<html>
<head>
<title>COP2500 - Lab 9</title>
</style></head>
<body>
<center>
<h3><b>COP2500 Assignment 9</b></h3>

<b>Queue:</b>
<form name="queue">
<input type=text size=60 name="display"><br>
<input type=text size=5 name="entry">

<input type=button value="Enqueue" onClick="enqueue()">
<input type=button value="Dequeue" onClick="dequeue()">
</form>

<hr>
<b>Stack:</b>
<form name="stack">
<table>
<tr>
<td>Entry: <input type=text size=5 name="entry"><br>




<input type=button value="Push" onClick="push()"><br>
<input type=button value="Pop" onClick="pop()"> <br>
<input type=button value="Peek" onClick="peek()"><br>
</td>
<td><textarea name=display rows=20></textarea></td>
</tr>

</table>
</form>

</center>
<script language="JavaScript">
var myqueue = new Array();
var front;
var back;
front = 0;
back = -1;

var mystack = new Array();
var top;
top = -1;


function enqueue()
{
// This function should take the value from the 'entry' text box and
// add it to the back of the queue. The 'back' queue variable must be
// incremented.

// Since the queue changed, call the display function. Done.
display_queue();
}

function dequeue()
{
// This function should display the value of the 'front' element
// in the queue using the 'alert' function and then increment the value
// of the front variable.
// if the queue is empty, i need to say so.

// Since the queue changed, call the display function. Done.
display_queue();
}

function push()
{
// This function should add the value in the 'entry' text box to the stack,
// and then increment the value of the 'top' variable.

// Since the stack changed, call the display function. .
display_stack();
}

function pop()
{
// This function should use the alert function to display the top
// of the stack and then remove the top item from the stack.
// You can 'remove' the item simply by decrementing the value of 'top'.
// If the stack is empty, it needs to say so.

// Since the stack changed, call the display function. .
display_stack();
}

function peek()
{
// This function should use the 'alert' function to display the top
// of the stack but not change the stack. If stack is empty,it needs to say so.
}

// *****************************************************************
// Do not edit anything below this line. Use the functions as given.
// *****************************************************************
function display_queue()
{ var output;
var i;

output = " ";
for (i = back; i >= front; i--) output = output + myqueue[i] + " ";

document.queue.display.value = output;
}


function display_stack()
{ var output;
var i;

output="";
for (i = top; i > -1; i--) output = output + mystack[i] + "\n";

document.stack.display.value = output;
}



</script>
</body>
</html>

I would really like to thank the guys that have been helping me. I think my brain would have exploded otherwize. Some of the problems have been simple misspellings, but when you have been staring at the same thing for hours it can sorta slip by.

HOPEFULLY this will be the last thing that I need some help with.

Bascially Im not sure if Im using the function command properly. When Submit Details is click it should validate the form and then when Calculate is pressed calculate the form (obviously).

I think maybe my var Array table is wrong? And the way the functions are set out doesnt seem it sit right.

Code:

 <script type="text/javascript">
				
				var element;
				var itemArray = new Array();
				itemArray [0] = "Bike"		//not sure if these are properly writen?//
				itemArray [1] = "TV"
				itemArray [2] = "iPod"
				itemArray [3] = "Car"
				var flag="OK";
				var count = 0
				
				document.write ("<form name='myform'><br><table>");
				while (count <= 3)
					{
					if (count < 3)
						{
						document.write ("<tr><td><value>Enter money from " + itemArray [count] + " sale.</td><td><input type='text' name=" + itemArray [count] + "></td></tr>");
						count++
						}
					else
						{
						document.write ("<tr><td><value>Enter the price of " + itemArray [count] + ".</td><td><input type='text' name=" + itemArray [count] + "></td></tr>");
						document.write ("<tr><td><input type='submit' value='Submit Details' onClick='validateform'</td></tr>");
						document.write ("<tr><td><input type='submit' value='Calculate Details' onClick='calculateform'</td></tr></table></form>");
						count++
						}
					}

function validateform()		//<=== doesnt run
{				
				element=document.getElementsByTagName ('input');
				for (counter=0; counter<element.length; counter++)
				{
					
					switch (element[counter].type)
						{
							case "submit":
							break;
							default:
							if (isNaN(element[counter].value) || (element[counter].value == "") )
								{
									alert("You need to enter a number into " + element[counter].name);
									flag="NotOK"
								}
							else
								{
									Bike=element[0].value;
									TV=element[1].value;
									iPod=element[2].value;
									Car=element[3].value;
								}
							break;	
						}
				}
}

function calculateform()	//<=== Doesnt run either
{
			if (flag=="OK")
				{
					if	(	(Number(element[Bike])) && (Number(element[TV])) && (Number(element[iPod])) && (Number(element[Car]))	)   //<========= Gets Bike is not defined error easy//
						{
						
						TotalMoney= parseFloat (Bike) + parseFloat (TV) + parseFloat (iPod)
						if 	(TotalMoney >= Car)
							{
							alert ("The total money is " + TotalMoney + " and the car price is " + Car + " and you can afford the car")
							}
						else
							{
							alert ("The total money is " + TotalMoney + " and the car price is " + Car + " and you cannot afford the car")
							}
						}
				}
}
		</script>