CODEWITHSUNDEEP
javascriptonclickdom-eventsonchangeonfocus
T Conroy
T Conroy

Reputation: 21

How do I use onFocus, onChange, and onClick events on a <input type="text"> field

I have a homework assignment where I am supposed to use the onFocus, onChange and onClick events on each of three form fields. Each event is supposed to pass the field name to the function. The function is supposed to alert that the event has taken place and let the user know how many alerts have occurred. I have spent the last week trying to find the answer and all I have been able to consistently find is that the onFocus event is NOT to be used with text fields (that does not change my assignment though). The code I have so far is as follows:

<SCRIPT LANGUAGE="JavaScript">
<!--

var numEvents = 0;
var field1 = ""; 
var field2 = ""; 
var field3 = "";

function clickedField(fieldId) {
    if (document.form1.field1.value = field1){ 
    events=runningTotal(1);
    alert("You have clicked Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field2.value = field2){ 
    events=runningTotal(1);
    alert("You have clicked Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field3.value = field3){ 
    events=runningTotal(1);
    alert("You have clicked Field 3. Alert Count = " + runningTotal(i) + ".");
    }
}

function changedField(fieldId) {
    if (document.form1.field1.value!= field1){ 
    events=runningTotal(1);
    alert("You have changed Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field2.value!= field2){ 
    events=runningTotal(1);
    alert("You have changed Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field3.value!= field3){ 
    events=runningTotal(1);
    alert("You have changed Field 3. Alert Count = " + runningTotal(i) + ".");
    }
}
/* 
function focusedField(fieldId) {
    if (document.form1.field1.value = field1){ 
    events=runningTotal(1);
    alert("You have focused on Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    else if (document.form1.field2.value = field2){ 
    events=runningTotal(1);
    alert("You have focused on Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    else if (document.form1.field3.value = field3){ 
    events=runningTotal(1);
    alert("You have focused on Field 3. Alert Count = " + runningTotal(i) + ".");
    } 
}*/

function runningTotal(i){
    numEvents += i;
    return numEvents;
}

// -->
</SCRIPT>

I know there are several errors though not in the actual code because it is not doing what I need it to do. Before I added the . Alert Count = " + runningTotal(i) + "." and the argument to the alert it was telling me when I changed a field.

Upvotes: 2

Views: 5901

Answers (4)

myokyawhtun
myokyawhtun

Reputation: 133

I'm not sure you need the folloing code to trigger those javascript functions 

<input name="field1" id="field1" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>
<input name="field2" id="field2" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>
<input name="field3" id="field3" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>

Upvotes: 2

Evert
Evert

Reputation: 8541

first things first: your if statements need comparison operators (==) instead of assignment operators (=), after that

something like this would work:

window.onload = function(){
    document.form1.field1.onclick = function(){
        changedField(this);
    }
}

It would send a reference to itelf to the function, where you can access its value or id etc. It needs to be handled after window.onload to ensure the form items exist before the event is assigned.

Upvotes: 0

scott.korin
scott.korin

Reputation: 2597

First, I don't see anywhere in your code that you assign those functions to the necessary events.

Second, I don't see anywhere that the field1, field2, and field3 vars are assigned to a value. Along with that, you are checking the value of the field, and I'm not sure why you are doing that, anyway.

And third, you have to use == to test for equivalency, not =.

Upvotes: 0

Daryl Teo
Daryl Teo

Reputation: 5495

if (document.form1.field1.value = field1){

Need to be 

if (document.form1.field1.value == field1){

Upvotes: 0

Related Questions