[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 258
  • Last Modified:

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!
0
beechhorn
Asked:
beechhorn
  • 6
  • 4
1 Solution
 
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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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
 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now