JavaScript - Traditional Event Handler With Functions?

if it is done like this:
Code:

anElement.onclick=handleIt;

function handleIt()
{   this. ...     //'this' refer to the anElement
}

However, if you attach an event, quirk happens:
Code:

anElement.attachEvent("onclick",handleIt);
   // not sure if anElement.addEventListener("click",handleIt,false) works well
function handleIt()
{   this. ...     //'this' refer to an empty object ???????
}

why 'this' doesn't refer to the current target?
anyone can help?

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.

Hello all,

I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another.

I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list.

This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously.....

<div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0"
alt="javascript button 1"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "img/abouth.png";
downImage = new Image();
downImage.src = "img/aboutc.png"
normalImage = new Image();
normalImage.src = "img/aboutn.png";
function changeImage()
{
document.images["aboutbutton"].src= upImage.src;
return true;
}
function changeImageBack()
{
document.images["aboutbutton"].src = normalImage.src;
return true;
}
function handleMDown()
{
document.images["aboutbutton"].src = downImage.src;
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</script></div>

Any suggestions on where I am going wrong would be wonderful.

Thanks so much in advance!

All the best

I have many examples within my page of the form:
Code:

<a id="L1" href="#" onclick="return showSpan();" onblur="return hideSpan();"><span> ... </span></a>

The page is styled so that hovering over the link displays the contents of the hidden <span> as a block without any javascript. I want this to work (that is display the span as a block) when the user tabs onto a link (and presses Return/Enter). When the user tabs away, it should hide the <span>.

My starting code looks like:
Code:

function showSpan() {
  var linkID = document.getElementById(this.id);
  var classList = linkID.getElementsByTagName('span');
  var divID = classList[0];
      divID.style.display = "block";
      return false;
} // function

with a similar function for hideSpan(),

Ultimately I would like to add these event handlers in the initialisation phase, which is why I have used a parameterless function.

Whenever I try this, I get an error that this.id does not exist.

How can I attach these event handlers?

John Rostron

hello everyone, i am new to all this..

i need help regarding..

i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.)

my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field.

i am able to do it for simple text field

as
onclick="javascript: showCalendar('idname')"

but how to do it in this case, where can i declare this ?

Hello,

I am working on a project that takes links on a page (Not all, depends on if they are Merchandise links or partner links), and passes some parameters to a tracking js call.

The problem is, I don't want to put 'onclicks" on every href as there could be a hundred on a page and many of the links are dynamically generated on the backend.

So, I was thinking of creating a function that took in parameters from each of the links that are pressed. But I was told "bind" is a good way to do this, but to be honest - it is very confusing to me.

How would I do this?

Lets say we have two links (there will be many more, but for an example sake).

<a href="somelink.html" id="linka">link a</a>
<javascript>
var cu = new Linktracker({
dispPrice: 30,
dispTitle: 'Manager',
dispProduct: 'Red Shoes'
});
$('linka').observe('click',
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

<a href="somelink.html" id="linkb">link b</a>
<javascript>
var cu = new Linktracker({
dispPrice: 10,
dispTitle: 'casual',
dispProduct: 'Blue Shoes'
});
$('linkb').observe('click',
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

How does any particular click know I am referencing the correct "var cu"?
Can something like this be done?

<a href="somelink.html" id="linkc">link c</a>
<javascript>

$('linka').observe('click',(
var cu = new Linktracker({
dispPrice: 30,
dispTitle: 'Manager',
dispProduct: 'Red Shoes'
});
)
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

What am I missing here? Should I use just "bind" or "bindAsEventListener"?

Since each link on the page is unique and will pass different values, what is the best way to do this without putting "onclicks" on every link?

Please help me with this code to determine whether the check box has been checked. I get "Thank you" even if I don't check the check box.

<script type="text/javascript">
var uncheck = document.getElementById().checked == false;
var accept;

function checkAccept()
{
var uncheck;
if (uncheck == false){
alert ("You must accept the terms.");
}
else (uncheck == true)
{
alert ("Thank you.");
}
}


</script>

<form>

<br />Please accept the terms by clicking the box below:
<br />Accept terms: <input type="checkbox" id="accept" value="Y" />
<br /><input type="button" name="btn" value="Accept" onclick="checkAccept()" />
</form>
</body>
</html>

I have a piece of JavaScript code that should validate that a username field is not empty or null and that a telephone field is in the correct format using event handler registration. It seems to be validating fine but if there is an error it still manages to submit.

HTML

Code:

<html>
    <head> 
        <script type = "text/javascript"  src = "js/validator.js" >
        </script>
    </head>

    <body>

        <form id = "decorForm" action = "">
            <table border = "0">
                <tr>
                    <th>Username: </th>
                    <td>
                        <input type = "text"  id = "myUserName" size = "15" maxlength = "15"/>
                    </td>
                </tr>

                <tr>
                    <th>Telephone: </th>
                    <td>
                        <input type = "text" id = "telephone" name = "telephone" size = "15" maxlength = "13"/>
                        <br />
                        (999)999-9999
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type = "submit" value = "Submit" />
                    </td>
                    <td>
                        <input type = "reset" value = "Reset" />
                    </td>
                </tr>

            </table>

        </form>

        <script type = "text/javascript"  src = "js/validatorr.js" >
        </script>

    </body>
</html>

JAVASCRIPT (validator.js)


Code:

function chkUser() {
// Verifies that the UserName field is not empty.
    var myUserName = document.getElementById("myUserName");
    if (myUserName.value == ""  || myUserName.value == null) {
        alert ("Please enter a Username!");
        return false;
    } else {
        return true;
    }
}

function chkTelephone() {
// Verifies that the Telephone field value is in the correct format.
    var tel = document.getElementById("telephone");
    var pos = tel.value.search(/^\(\d{3}\)\d{3}-\d{4}$/);
    if (pos != 0) {
        alert ("Please enter telephone number in the following format: (999)999-9999");
        return false;
    } else {
        return true;
    } 
}

function chkFields() {
// Verifes all fields and returns boolean to event handler
// The event handler function
    if (chkUser() && chkTelephone()) {
        return true;
    } else {
        return false;
    }
}

JAVASCRIPT (validatorr.js)

Code:

//Register the event handlers for validator.js
document.getElementById("decorForm").onSubmit = chkFields;

I am trying to use this as an example.

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?

Hello,
Is it possible to set an html element's (created through HTML DOM's createElement() method) 'onclick' attribute's value to a Javascript function which requires a parameter, passing a variable to it at the same time?

I have the following Javascript code:

Code:

var parentDiv = document.getElementById("subscribers");
var stubSpan = document.createElement("span");
stubSpan.id = "opentok_subscriber_" + stream.streamId;
stubSpan.onclick = showStreamInFullScreenMode(stream);
parentDiv.appendChild(stubSpan);

'stream' in the bolded line is a parameter variable of the function that the above code is in, and I'm trying to pass it to another function using an onclick event. Can this be done, or am I crazy to be even trying to do this?

Thanks in advance.

Hi I am trying to develop a
Qwerty Shifter
http://www.cross-browser.com/toys/qwertyshifter.html
by handling keyboard events.

I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s"
"b" changes "n"

for internet explorer I have script

function InputEventKeyPress(event){

window.event.keyCode = shifter (window.event.keyCode);

} //Key press


function shifter (keyAscii)
{
switch (keyAscii){
//CAPITAL LETTERS A - Z
case 65 : return 83; break; //A
case 66 : return 78; break; //B
case 67 : return 86 ; break; //C
}
}

Hello all, and thank you for your coments,

I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height.

As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it?


Code:

<html><head><title>Title</title><script languaje="javascript">

const c_ra=16/9;
window.onresize = function WindowReSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
//  myWidth = window.innerWidth;
	myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
//    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }

myWidth = Math.floor(myHeight*c_ra);
window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler !
};  

</script></head><body><p>Hello World</p></body></html>

Hi,

I am trying to get my onclick event to handle both of the function below. I want the event to return false (stop executing) if any of the two functions return false. Here is my code:
Code:

function isNumeric(elem, helperMsg){
            var numericExpression = /[0-9]+/;
            if(!elem.value.match(numericExpression)){
                SaveRecord();
                return true;
            }else{
                alert("You cannot enter numbers in the Comments field.");
                return false;
            }                                   
        }
        
        function lengthRestriction(elem, min, max){
           var x = elem.value;
           if(x.length >= min && x.length <= max){
                SaveRecord();
              
           }else{
                alert("Please enter between " +min+ " and " +max+ " characters in the Issue Number field");
               
           }
        }

Please help me. Thank you.

I am try to make a form that appears to be multi page. I am trying to use a button to hide one div and display another at the same time my script is

head
Code:

<script language=javascript type='text/javascript'> 
function hidediv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){//if they are 'see' divs 
if (document.getElementById) // DOM3 = IE5, NS6 
divs[i].style.visibility="hidden";// show/hide 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'hidden'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'hidden'; 
} 
} 
}

function showdiv(pass) { 
var divs = document.getElementsByTagName('div'); 
for(i=0;i<divs.length;i++){ 
if(divs[i].id.match(pass)){ 
if (document.getElementById) 
divs[i].style.visibility="visible"; 
else 
if (document.layers) // Netscape 4 
document.layers[divs[i]].display = 'visible'; 
else // IE 4 
document.all.hideShow.divs[i].visibility = 'visible'; 
} 
} 
} 
</script>

body
Code:

<form name="PublicOrderPage" action="save_client_information.php"  onsubmit="return validateForm()" method="post">


<div id="div1" style="width:600px; height: auto;background: yellow;">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Client Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Name:</b></td>
    <td><input type="text" name="client_name" id="client_name" value="<?php echo $_POST['client_name']; ?>" /></td>
	<td style="padding-left:25px;"><b>Home Phone:</b></td>
    <td><input type="text" name="client_home_phone" id="client_home_phone" value="<?php echo $_POST['client_home_phone']; ?>" /></td>
  </tr>
  </table>
  <br/>
 <table width="270" border="0"> 
	<tr>
		<td style="padding-left: 180px;"><b>Email:</b></td>
		<td><input type="text" name="client_email" id="client_email" value="<?php echo $_POST['client_email']; ?>" /></td>
	</tr>
</table>
<br/>
<table>
	<tr>
		<td style="padding-left:280px;"><input name="save_client_info" type="button" value="Next" onclick="hidediv('1');shwodiv('2');" >  </td>
	</tr>
</table>
</div>




<div id="div2" style="width:600px; height: auto;background: yellow; ">
<table width="600" border="0">
<tr>
<legend><h3 style="padding-left:172.5px;">Required Site Information</h3></legend>
</tr>
   <tr>
    <td style="padding-left:25px;"><b>Site Street:</b></td>
    <td><input type="text" name="site_street" id="site_street" value="<?php echo $_POST['site_street']; ?>" /></td>
	<td style="padding-left:25px;"><b>Site City:</b></td>
    <td><input type="text" name="site_city" id="site_city" value="<?php echo $_POST['site_city']; ?>" /></td>
  </tr>
  </table>
  <br/>
  
  <legend><h3>Inspection Type</h3></legend>
 <table width="270" border="0"> 
	 <table width="602" border="0">
    <tr>
      <td width="252"><input type="checkbox" name="cb_full_home" id="cb_full_home" <?php if ($_POST['cb_full_home']) echo 'checked="checked"'; ?> />
        Full Home</td>
      <td width="150"><input type="checkbox" name="cb_4_point" id="cb_4_point" <?php if ($_POST['cb_4_point']) echo 'checked="checked"'; ?> />
        4 Point</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_condominium" id="cb_condominium" <?php if ($_POST['cb_condominium']) echo 'checked="checked"'; ?> />
        Condominium</td>
      <td ><input type="checkbox" name="cb_wind_mit" id="cb_wind_mit" <?php if ($_POST['cb_wind_mit']) echo 'checked="checked"'; ?> />
        Wind Mit</td>
    </tr>
    <tr>
      <td ><input type="checkbox" name="cb_roof_cert" id="cb_roof_cert" <?php if ($_POST['cb_roof_cert']) echo 'checked="checked"'; ?> />
        Roof Cert</td>
      <td ><input type="checkbox" name="cb_drywall" id="cb_drywall" <?php if ($_POST['cb_drywall']) echo 'checked="checked"'; ?> />
        Drywall</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cb_reinspect" id="cb_reinspect" <?php if ($_POST['cb_reinspect']) echo 'checked="checked"'; ?> />
        Re-Inspect</td>
      <td><input type="checkbox" name="cb_followup" id="cb_followup" <?php if ($_POST['cb_followup']) echo 'checked="checked"'; ?> />
        Follow-Up</td>

</table>
<img src="CaptchaSecurityImages.php" />
Security Code: 
<input id="security_code" name="security_code" type="text" />
<br />
<input name="save_client_info" type="submit" value="Save" />
</div>
</form>

When the next button is used I would Like to Hide Div1 And Display Div2 so that it looks as if it is a new page.

Any help would be greatly appreciated.