events not being created with the form element - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

events not being created with the form element

creating form elements with js functions file

spaceboy

12:45 pm on Jul 7, 2008 (gmt 0)

10+ Year Member

Hello
I've got a file with javascript functions, which works well apart for the fact that when I create an element (or modify an existing one) it won't create/assign events.
All the attributes (name, type, etc) are assigned all right, but not the events (onclick, onchange, etc). If I copy the whole function and paste it on the main document, it does work and the event works fine, but I'd rather have the js functions in a separate file.
I'll post a bit of code as an example:

js file:


function change_M(iText, mElem) {
var section = document.getElementById(mElem);
var aElem = document.getElementById(mElem+'_a');
if ( iText == 'Minimise' ) {
var nText = 'Maximise';
var nShow = 'none';
} else {
var nText = 'Minimise';
var nShow = 'block';
}
aElem.onclick = function() { change_M(nText, mElem) };
aElem.innerHTML = nText;
section.style.display = nShow;
return false;
}

php file:


<head>
<script type="text/javascript" src="../script/forms_tables.js" language="javascript"></script>
</head>
<body>
<a href="#" id="garment_data_a" class="jq_minimise" onclick="change_M('Minimise', 'garment_data');">Minimise &gt;</a>

Any help is much appreciated.

Kind regards !

daveVk

1:15 pm on Jul 7, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I think this is a problem of scope

when the onclick occurs ( the second time ) this is executed

change_M(nText, mElem)

at which time nText and mElem will not be defined.

consider using onclick="change_M(this);"
change_M will need reworking a bit.

Fotiman

2:48 pm on Jul 7, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

This is a scope problem. You need a closure to keep the items you want in scope. I *think* this should do it:


aElem.onclick = function(t, e) { 
  return function() { 
    change_M(t, e); 
  }; 
}(nText, mElem);

In other words, the onclick handler gets assigned the result of calling the outer anonymous function with your desired variables passed in. That function returns an anonymous function (which gets assigned to your onclick handler), but now those variables are within scope thanks to the closure.

Let us know if this worked.

spaceboy

5:44 pm on Jul 7, 2008 (gmt 0)

10+ Year Member

Thank you very much !

unfortunately I still can't get the events to respond.
I tried to get an alret('x') and not even that triggers.


u.onclick = function() { 
 return function() { 
  alert('x'); 
 }; 
};

Not even that works.

Thanks again for the replies !

Fotiman

9:43 pm on Jul 7, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Does this work:
u.onclick = function() {
return function() {
alert('x');
};
}();

Note the parenthesis.

daveVk

12:39 am on Jul 8, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

The closure should work but in this case there seems no need to change the onclick handler at all, as the first parameter can be deduced from section.style.display OR aElem.innerHTML

function change_M( mElem) {
var section = document.getElementById(mElem);
var aElem = document.getElementById(mElem+'_a');
if ( section.style.display === 'block' ) {
var nText = 'Maximise';
var nShow = 'none';
} else {
var nText = 'Minimise';
var nShow = 'block';
}
aElem.innerHTML = nText;
section.style.display = nShow;
return false;
}

php file:

<head>
<script type="text/javascript" src="../script/forms_tables.js" language="javascript"></script>
</head>
<body>
<a href="#" id="garment_data_a" class="jq_minimise" onclick="change_M('garment_data');">Minimise ></a>

spaceboy

3:47 pm on Jul 8, 2008 (gmt 0)

10+ Year Member

Fotiman, it does work with the parenthesis at the end !
Fantastic !

daveVk, thanks for pointing that out, however I needed events on some other functions.

Thank you both for the help provided.