addEventListener

81 views
Skip to first unread message

MonkeyMargie

unread,
Jul 12, 2012, 1:02:36 PM7/12/12
to greasemon...@googlegroups.com

I've tried this:
var elmLink = document.getElementById('MyFieldName');
elmLink.addEventListener("click", sayhello('world'), true);
but it seems to execute only when the page is loaded, not when I click on the field. I've tried other actions such as 'mousemove', 'change', etc., but nothing works. Help!

MonkeyMargie

unread,
Jul 12, 2012, 1:07:31 PM7/12/12
to greasemon...@googlegroups.com

Andre Gerdts

unread,
Jul 12, 2012, 1:20:01 PM7/12/12
to greasemon...@googlegroups.com
sayhello is executed when the call to addEventlistener is executed. You
need to supply a function pointer ...
> --
> You received this message because you are subscribed to the Google
> Groups "greasemonkey-users" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/greasemonkey-users/-/-fc1MDcHqmwJ.
> To post to this group, send email to greasemon...@googlegroups.com.
> To unsubscribe from this group, send email to
> greasemonkey-us...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/greasemonkey-users?hl=en.


Brian L. Matthews

unread,
Jul 12, 2012, 1:22:48 PM7/12/12
to greasemon...@googlegroups.com
addEventListener accepts a function as its second argument, which is
called when the event occurs. Instead of *passing* a function, you're
*calling* the function sayhello, and passing sayhello's return value to
addEventListener (which is probably undefined, so clicks, or whatever
event you use, are effectively ignored). Instead try:

elmLink.addEventListener("click", function(){sayhello('world');}, true);

That creates an anonymous function and passes it to addEventListener.
When the element is clicked, the browser calls the anonymous function,
which then calls sayhello.

Brian

MonkeyMargie

unread,
Jul 12, 2012, 1:49:34 PM7/12/12
to greasemon...@googlegroups.com
Thanks! That has definitely gotten me closer and my 'Hello World' pop-up works, but of course that's not what I really need to do. I have a form that has field text that is too small so I change the field size for the boxes that I'm going to type in. This is my code to do that:
 
function changeFont(myID)
{
myID.style.font = "18px arial";
}
allTextareas = document.getElementsByTagName('*');
for (var i = 0; i < allTextareas.length; i++)
{   
  thisTextarea = allTextareas[i];
(thisTextarea.name == 'myfield')
  {
  changeFont(thisTextarea);
  }

The problem is that when I select items from certain lists and translatable fields, the font reverses to the original font. I'm trying to add code to switch it back after the user updates the field (or to be safe, right now I'm using mousemove, so it should happen a lot). This is my code:
 
var elmLink = document.getElementById('listboxfield');
elmLink.addEventListener("mousemove", function(){changefont(thisTextarea);}, true);
I'm not really sure what to put in my changefont function since I'm updating a text box, not the 'listboxfield' that has its mousemove setting. Sorry, I'm very new at JavaScript. I'd appreciate any help I can get.
 
 
On Thursday, July 12, 2012 1:02:36 PM UTC-4, MonkeyMargie wrote:

MonkeyMargie

unread,
Jul 12, 2012, 2:07:04 PM7/12/12
to greasemon...@googlegroups.com
Actually, I've solved the problem in my previous post. It's definitely changing the font back once I edit the listbox field, but then it refreshes again and I lose it. It seems to work only the first time I mousemove, change, etc. in the field, and then it won't change the font again after.

On Thursday, July 12, 2012 1:02:36 PM UTC-4, MonkeyMargie wrote:
Reply all
Reply to author
Forward
0 new messages