Jump to content
Larry Ullman's Book Forums

Event Handling Problem


Recommended Posts

I have a form with one text input, with an initial value of "Are you happy?" That document have two links, named "YES" and "NO". I need to add onMouseover events to these links that can change form's text input value: When user moves over "YES" the text input shows "clap clap".. When user moves mouse over "NO", the text input shows "so sad". (May be this is not a good example, but ...)

I followed examples of chapter 8. And come up with following codes: Including only parts of the code:

I have modified utilities.js file for the following function. Rest two functions are same as in the book's example.

 

 

setText: function(id, message) {

'use strict';

 

if((typeof id == 'string') && (typeof message == 'string')) {

var output = this.$(id);

if(!output) return false;

if(output.value !== undefined) {

output.value = message;

} else {

output.value = message;

}

 

return true;

} //End of main IF

}, //End of setText() fn.

 

 

Other js file, to call eventhandler and updatetext function:

 

 

function updateText() {

'use strict';

 

var msg1 = "Clap Calp!!";

var msg2 = "Sour puss!";

 

U.setText('ftxt', msg1); //ftxt is the form's text input id from html file.

U.setText('ftxt', msg2);

 

}

 

function init() {

'use strict';

U.addEvent(U.$('link1'), 'mouseover', updateText); //link1 is the link id from html file.

U.addEvent(U.$('link2'), 'mouseover', updateText);

} //End of init() fn.

 

U.addEvent(window, 'load', init);

 

These both files are included in html file. When I run the file, it sets "Sour puss" value once the mouse over event occurs on any one of the link. After that, the text input value is not updated at all.

Link to comment
Share on other sites

It's because your updateText function is writing both to the input text box every time either link is moused over. For example, if you comment out the following line, then you'll always only get the "Clap Calp[sic]!!" text:

 

U.setText('ftxt', msg2);

 

Basically, you need a way of differentiating which link was moused over, and then act accordingly.

 

As a simple example (and I'm not going to use Larry's code), you could do something like the following:

 

<form>

 

<input type="text" name="textHere">

 

</form>

 

<a href="#">Clap Calp!!</a>

 

<a href="#">Sour puss!</a>

 

<script>

 

var aLinks = document.getElementsByTagName('a');

 

for (var i = 0, aLinksLen = aLinks.length; i < aLinksLen; i += 1) {

 

aLinks.onmouseover = putTextInInputBox;

 

}

 

function putTextInInputBox() {

 

document.forms[0].textHere.value = this.innerHTML;

 

}

 

</script>

 

And the nice thing about the above script is that it will scale automatically no matter how many links you have. Anyway, that's one solution. Lemme know what you think.

  • Upvote 1
Link to comment
Share on other sites

Yes, may be this is related to Referencing the event. Thanks for putting out all in code. But my text input box updates different variable values, and not what is there in this.innerHTML.

 

My problem is like : If link1 is mouseover then update text input with message1 or if link2 is mouseover then update same text input with message2.

 

In checkbox example we can know which checkbox is checked by looking at "checkbox.checked" value. But how do I get hold of which link is mouseovered at this point?

Link to comment
Share on other sites

I'm not quite sure how your problem differs from what I explained, but if you simply want to output a particular value to a form input box when a link is moused over, just do the following:

 

<form>

 

<input type="text">

 

</form>

 

<a href="#" id="link1">Something</a>

 

<script>

 

document.getElementById('link1').onmouseover = function () {

 

document.forms[0].elements[0].value = 'Enter whatever value you want to put into the input box here.';

 

};

 

</script>

 

That's basically it. Rinse and repeat as necessary. As I suggested above though, if you properly design your HTML, you can write simple JS code that will automatically scale, no matter how many links you have.

  • Upvote 1
Link to comment
Share on other sites

Thanks again. I did understand what you said and did exactly as your suggestion.

But I have to output two different values at the same text input for two different links. With your code too I can get only one output.

<input type="text" id="ftxt" name="ftxt" value="Are you happy?">

</form>

<a href="#">YEs</a>

<a href="#">No</a>

<script type="text/Javascript">

var aLinks = document.getElementsByTagName('a');

for(var i=0, aLinksLen = aLinks.length; i<aLinksLen; i++) {

aLinks.onmouseover = putText;

}

 

function putText() {

msg1 = "clap clap";

msg2 = "sour puss";

document.forms[0].ftxt.value = msg1;

document.forms[0].ftxt.value = msg2; //this line overwrites first msg. If I don't keep it here, then it updates only first msg.

}

Link to comment
Share on other sites

sonal, that's because (I hate to say it) you're not listening to what I'm saying.

If you would carefully read what I said and look at the code, it would make sense.

 

Since you only have two possibilities, just doing the following will keep things simple:

 

<form>

 

<input type="text">

 

</form>

 

<a href="#" id="link1">Yes</a>

 

<a href="#" id="link2">No</a>

 

<script>

 

document.getElementById('link1').onmouseover = function () {

 

document.forms[0].elements[0].value = 'Clap, clap';

 

};

 

document.getElementById('link2').onmouseover = function () {

 

document.forms[0].elements[0].value = 'Sour puss';

 

};

 

</script>

 

That should work fine.

  • Upvote 1
Link to comment
Share on other sites

I surely agree what you say. You show me how to handle all and any links in the document. The problem was I was just thinking on links when I had to give some thought on the other function of putting text. But, I got it now and come up with following code, which works as my exercise wants. I'm just pasting the putText function.

function putText() {

 

msg1 = "clap clap";

msg2 = "sour puss";

if(this.id == 'yes') {

document.forms[0].ftxt.value = msg1; }

else {

document.forms[0].ftxt.value = msg2;

}

} //End of functin putText().

 

Thanks a lot for helping.

Link to comment
Share on other sites

I understand your point. As we get reference to all links in a document, we can get reference to other objects in the document. So I'm trying to get all forms in a doc. But following code gives just first form, and then says document.forms is undefined.

 

function getForms() {

//document.write("in fun");

totalForms = document.getElementsByTagName('form');

formsLength = document.forms.length;

for(i=0; i<formslength; i++)="" {="" document.write(document.forms.name);="" }="" document.write("formslength="" :="" "="" +="" formslength);="" }<="" code="">

 

</formslength;>

Link to comment
Share on other sites

When I used "document.write(document.forms.name);" in my code earlier, it was only printing the first form from the document, leaving every other form in dark. Then I come to know this "write" function wipes out values after page loads. So I used "console.log " method to print what I need to know.

Link to comment
Share on other sites

Larry has explained about write and writeln methods in Ch. 9, on page 334. I'm just copying those words here. "Still there is one appropriate situation for write() or writeln(): to dynamically include extra resources under certain conditions. For example, ads and third-party scripts........"

 

@Larry,

After reading first part of chapter 9, I decided to read the book completely as my first priority, because it is the best resource and I need to grasp those info there before I try to complete my course assignments.

Link to comment
Share on other sites

  • 2 weeks later...
I need to add onMouseover events to these links that can change form&#39;s text input value.

 

You need to understand that events fire automatically when a certain criteria is met (or in short intervals). A onMouseoverEvent will fire on mouseovers. What you do is listen after events. The automatic listener will catch the events. That is what Jon's code does. He asks the document object (the html page) to get him all link elements (<a href="...") with this line of code:

 

var aLinks = document.getElementsByTagName('a');

 

The var aLinks is now holding ALL link elements on the Html page. The events/listening is not important yet. This is when he creates listeners

 

for (var i = 0, aLinksLen = aLinks.length; i < aLinksLen; i += 1) {

  aLinks[i].onmouseover = putTextInInputBox;

}

 

It's pretty much the same as doing:

 

aLinks[0].onmouseover = putTextInInputBox;
aLinks[1].onmouseover = putTextInInputBox;
aLinks[2].onmouseover = putTextInInputBox;

 

 

This code says: "For every a element in the HTML page, create a listener for onmouseover events. When we hear that event, run the function.

 

The great think is that each link automatically know when a mouseover event happens. When it's hovered, it will hear that event and run putTextInInputBox. The VALUE of that link will then be added to the input box.

 

Read up on how events work and how you capture them. It's VERY important for understanding how to write good code. :)

  • Upvote 2
Link to comment
Share on other sites

 Share

×
×
  • Create New...