Solved

How do you assign actions to events?

Posted on 2004-10-28
248 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
Question by:beechhorn
    10 Comments
     
    LVL 63

    Expert Comment

    by:Zvonko
    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
    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
    In my first proposal is nowhere the string calendar.input
    In my second proposal is the first letter of Function an uppercase F

    0
     

    Author Comment

    by:beechhorn
    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
    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:
    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
    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
    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
    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
    Yea, that is better readable.

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Prepare to Pass the CompTIA A+ 900 Series Exam

    CompTIA aims to adapt its A+ Certification to reflect the most current knowledge and skills needed by today's IT professionals--and this year's 2016 exam is harder than ever. This certification is one of the most highly-respected and sought after in IT.

    In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
    In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    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…

    913 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now