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="javascript" 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.push(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=\"doThis(0, oNewObj)\">view first</td>";
strHTML += "</tr>";
strHTML += "<tr>";
strHTML += "<td onclick=\"doAll(oNewObj)\">view all</td>";
strHTML += "</tr></table>";
if (typeof(document.getElementById) == "undefined") return;
var DIVresult = document.getElementById("DIVresult");
if (DIVresult) DIVresult.innerHTML = 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.things[i].code + "\n" + oNewObj.things[i].color);
}
// -->
</script>
</head>
<body>
<DIV id="DIVresult"></DIV>
</body>
</html>
L8R
"js" <an********@yahoo.com> wrote in message
news:23**************************@posting.google.c om...
| 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='javascript'>
| <!--
| var oNewObj = {things:[{code:1, color:'abc'}]};
| var strHTML;
|
| strHTML = "<table><tr>"
| strHTML += "<td id='1' onclick='javascript
:doThis(oNewObj)'>click
| this</td>"
| strHTML += "</tr>"
| strHTML += "<tr>"
| strHTML += "<td id='2' onclick='javascript
:doAll(oNewObj)'></td>"
| strHTML += "</tr></table>"
| DIVresult.innerHTML = 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.things.length; i++)
| alert(oNewObj.things[i].code + '\n' + oNewObj.things[i].color);
| }
| //-->
| <DIV id='DIVresult'></DIV>
| </body>
| </html>
