How do you assign actions to events?

Ok first off I have two pages

index.html is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en-gb">
  <head>
    <script src="scripts/calendar.js"
            type="text/javascript"/>
    <title>Calendar Test</title>
  </head>
  <body onload="calendar1 = new calendar(document.getElementById('calendar_content'), document.getElementById('calendar_input'));">
    <fieldset>
      <input id="calendar_input"
             onclick="javascript: calendar_input_onclick(calendar1);"
             type="text"
             value="Calendar Input"/>
    </fieldset>
    <div id="calendar_content">
      Calendar Contents
    </div>
  </body>
</html>

and scripts/calendar.js is as follows:

function calendar(content,
                  input) {
  this.content = content;
  this.input = input;
  this.input.onclick = calendar_input_onclick(this);
}

function calendar_input_onclick(calendar) {
  calendar.input.value = "foo";
  calendar.content.innerHTML += "bar";
}

My problem is that the call in function calendar for this.input.onclick to do something doesn't work.

I am having to resort to including an onclick in index.html for the input.

From the purity of reuseablity I do not wish to have to do this...

I have heard of a cross browser method of assigning actions to events but this does not seem to work in my case. Anyone have a working way to do this. Also can you post back using my code as am a novice and will get confused otherwise thanks!
beechhornAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
Like this:

function calendar(content, input) {
  this.content = content;
  this.input = input;
  this.input.onclick = function(){calendar_input_onclick(this)};
}

Or like this:

function calendar(content, input) {
  this.content = content;
  this.input = input;
  this.input.onclick = new Function("calendar_input_onclick(this)");
}



0
beechhornAuthor Commented:
Using your first approach I get an error

Error: calendar.input has no properties
Source File: scripts/calendar.js
Line: 9

Using your second approach I get two errors

Error: missing formal parameter
Source File: scripts/calendar.js
Line: 5
this.input.onclick = new function("calendar_input_onclick(this)");
0
ZvonkoSystems architectCommented:
In my first proposal is nowhere the string calendar.input
In my second proposal is the first letter of Function an uppercase F

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

beechhornAuthor Commented:
Ok changed the case of your second example I now just get the error on line 9.

It isn't picking up the object.input value...

You are certainly getting points for your answer - I will have to up the points to account.

However using onclick="" in the index.html page I don't get this line 9 error.

I think it is passing by value instead of by reference using your example.

Try recreating the files to see if it works on yours because both IE and Firefox are complaining about line 9 which works fine the other way...
0
beechhornAuthor Commented:
this.input.onclick = new Function("calendar_input_onclick(calendar1)");

works fine

this.input.onclick = new Function("calendar_input_onclick(this)");

doesn't

Grrr well done JavaScript allow for objects that can't reference themselves properly...
0
ZvonkoSystems architectCommented:
Ok, extend your calendar() function like this:

function calendar(content, input) {
  this.content = content;
  this.input = input;
  this.input.calObj = this;
  this.input.onclick = function(){calendar_input_onclick(this)};
}


And your calendar_input_onclick() function extend to this:

function calendar_input_onclick(theBtn) {
  calender = theBtn.calObj;
  theBtn.value = "foo";
  calendar.content.innerHTML += "bar";
}



0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
beechhornAuthor Commented:
You had me worried there

calender = theBtn.calObj;

should be

calendar = theBtn.calObj;

I have been having troubles spelling the word myself...

But thanks it works now!!!
0
beechhornAuthor Commented:
I rewrote it a bit for future reference by anyone here it is:

function calendar(content,
                  input) {
  this.content = content;
  this.input = input;
  this.input.calendar = this;
  this.input.onclick = function(){calendar_input_onclick(this)};
}

function calendar_input_onclick(input) {
  calendar = input.calendar;
  calendar.input.value = "foo";
  calendar.content.innerHTML += "bar";
}
0
beechhornAuthor Commented:
Or even better:

function calendar(content,
                  input) {
  this.content = content;
  this.input = input;
  this.input.calendar = this;
  this.input.onclick = function(){calendar_input_onclick(this.calendar)};
}

function calendar_input_onclick(calendar) {
  calendar.input.value = "foo";
  calendar.content.innerHTML += "bar";
}
0
ZvonkoSystems architectCommented:
Yea, that is better readable.

My problem is that I try allways to reduce the redudancies.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.