create objects in JavaScript

J

js

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.code + '\n' + oNewObj.things.color);
}
//-->
<DIV id='DIVresult'></DIV>
</body>
</html>
 
L

Lee Harvey

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.code + "\n" + o.things.color);
}

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

L8R

| 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.code + '\n' + oNewObj.things.color);
| }
| //-->
| <DIV id='DIVresult'></DIV>
| </body>
| </html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
How can I guarantee that the all callback functions of the first Ajax API call have finished executing before initiating the 2 call in JavaScript? 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Sort by number of characters 1
In javascript, XML File Create, File Save 2
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4

Members online

Total: 128 (members: 1, guests: 127)
Robots: 56

Forum statistics

Threads
474,077
Messages
2,570,569
Members
47,205
Latest member
KelleM857

Latest Threads

Top