create objects in JavaScript

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • js
    #1

    create objects in JavaScript

    Two questions:

    1. I created Javascript objects called oNewObj using {} construct as
    in the follwoing code segment. When I clicked on the <td> element, I
    got runtime error "oNewObj is undefined". When I changed the <td>
    onclick event to doThis(this), then I can exam (this) object.
    However, I really want to exam the oNewObj. Does anyone know how to
    do it? Thanks.

    2. I need to add additional things to the oNewObj, how could I append
    new object to it so that it would look like: {things:[{code:100,
    color:'green'}],[{key:215, color:'red'}]};

    <html>
    <body>
    <script language='javas cript'>
    <!--
    var oNewObj = {things:[{code:1, color:'abc'}]};
    var strHTML;

    strHTML = "<table><tr >"
    strHTML += "<td id='1' onclick='javasc ript:doThis(oNe wObj)'>click
    this</td>"
    strHTML += "</tr>"
    strHTML += "<tr>"
    strHTML += "<td id='2' onclick='javasc ript:doAll(oNew Obj)'></td>"
    strHTML += "</tr></table>"
    DIVresult.inner HTML = strHTML;

    function doThis(o)
    {
    alert(o.things[this.id].code + '\n' + o.things[this.id].color);
    }

    function doAll()
    {
    var i;
    for (i=0; i<=oNewObj.thin gs.length; i++)
    alert(oNewObj.t hings[i].code + '\n' + oNewObj.things[i].color);
    }
    //-->
    <DIV id='DIVresult'> </DIV>
    </body>
    </html>
    Tags: None
    • Lee Harvey
      #2
      Re: create objects in JavaScript

      Quite a few simple problems here, I'll try to be brief:

      - First, the </script> end tag is missing ;-)
      - The "DIVresult" variable is never properly retrieved from the DOM.
      - The "DIVresult" HTML element is not created before it's referenced.
      - To avoid maintenance confusion, it's bad to use numeric id's for elements.
      - It's unnecessary to use the javascript: pseudo-protocol in event handlers.
      - JavaScript arrays start at index 0 (zero).
      - Automatic object & array creation syntax isn't supported by all browsers.

      As such, the following code should help. Tested in IE 6.0, Mozilla 1.4, and
      Opera 7.11...

      <html>
      <head>
      <title>Test</title>
      <script language="javas cript" type="text/javascript">
      <!--
      function obj() {
      this.things = new Array();
      this.add = function(_code, _color) {
      function things(_code, _color) {
      this.code = _code;
      this.color = _color;
      }
      this.things.pus h(new things(_code, _color));
      }
      }

      // Global var...
      var oNewObj = null;

      window.onload = function() {
      oNewObj = new obj();
      oNewObj.add(0, "abc");
      oNewObj.add(100 , "green");
      oNewObj.add(215 , "red");

      var strHTML = "<table><tr >";
      strHTML += "<td onclick=\"doThi s(0, oNewObj)\">view first</td>";
      strHTML += "</tr>";
      strHTML += "<tr>";
      strHTML += "<td onclick=\"doAll (oNewObj)\">vie w all</td>";
      strHTML += "</tr></table>";

      if (typeof(documen t.getElementByI d) == "undefined" ) return;
      var DIVresult = document.getEle mentById("DIVre sult");
      if (DIVresult) DIVresult.inner HTML = strHTML;
      }

      function doThis(i, o) {
      alert(o.things[i].code + "\n" + o.things[i].color);
      }

      function doAll() {
      for (var i = 0; i < oNewObj.things. length; i++)
      alert(oNewObj.t hings[i].code + "\n" + oNewObj.things[i].color);
      }
      // -->
      </script>
      </head>
      <body>
      <DIV id="DIVresult"> </DIV>
      </body>
      </html>

      L8R

      "js" <androidsun@yah oo.com> wrote in message
      news:23869fd0.0 307311642.7668a 8cb@posting.goo gle.com...
      | Two questions:
      |
      | 1. I created Javascript objects called oNewObj using {} construct as
      | in the follwoing code segment. When I clicked on the <td> element, I
      | got runtime error "oNewObj is undefined". When I changed the <td>
      | onclick event to doThis(this), then I can exam (this) object.
      | However, I really want to exam the oNewObj. Does anyone know how to
      | do it? Thanks.
      |
      | 2. I need to add additional things to the oNewObj, how could I append
      | new object to it so that it would look like: {things:[{code:100,
      | color:'green'}],[{key:215, color:'red'}]};
      |
      | <html>
      | <body>
      | <script language='javas cript'>
      | <!--
      | var oNewObj = {things:[{code:1, color:'abc'}]};
      | var strHTML;
      |
      | strHTML = "<table><tr >"
      | strHTML += "<td id='1' onclick='javasc ript:doThis(oNe wObj)'>click
      | this</td>"
      | strHTML += "</tr>"
      | strHTML += "<tr>"
      | strHTML += "<td id='2' onclick='javasc ript:doAll(oNew Obj)'></td>"
      | strHTML += "</tr></table>"
      | DIVresult.inner HTML = strHTML;
      |
      | function doThis(o)
      | {
      | alert(o.things[this.id].code + '\n' + o.things[this.id].color);
      | }
      |
      | function doAll()
      | {
      | var i;
      | for (i=0; i<=oNewObj.thin gs.length; i++)
      | alert(oNewObj.t hings[i].code + '\n' + oNewObj.things[i].color);
      | }
      | //-->
      | <DIV id='DIVresult'> </DIV>
      | </body>
      | </html>


        Comment

        • j s
          #3
          Re: create objects in JavaScript

          Thank you very much for the detailed response.



          *** Sent via Developersdex http://www.developersdex.com ***
          Don't just participate in USENET...get rewarded for it!

            Comment

            Previous template Next
            Working...