Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do you assign actions to events?

Posted on 2004-10-28
10
Medium Priority
?
256 Views
Last Modified: 2008-03-17
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
Comment
Question by:beechhorn
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
10 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 12432355
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
 

Author Comment

by:beechhorn
ID: 12432437
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12432459
In my first proposal is nowhere the string calendar.input
In my second proposal is the first letter of Function an uppercase F

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:beechhorn
ID: 12432495
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
 

Author Comment

by:beechhorn
ID: 12432544
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
 
LVL 63

Accepted Solution

by:
Zvonko earned 420 total points
ID: 12432569
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
 

Author Comment

by:beechhorn
ID: 12432593
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
 

Author Comment

by:beechhorn
ID: 12432606
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
 

Author Comment

by:beechhorn
ID: 12432613
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
 
LVL 63

Expert Comment

by:Zvonko
ID: 12432637
Yea, that is better readable.

My problem is that I try allways to reduce the redudancies.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

597 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question