JavaScript Architecture for Project?

[Kevin]

Good Morning,

My project consists of three:

1.main.html
2.paintTable.js
3.saveTable.js

main.html just calls funtions #2 and #3.

paintTable.js(void) consists of a bunch of document.write(...) that
draw HTML. It takes no

saveTable.js(void) makes a dummy XML, then performs a
xmlDoc.save("some location.xml"); In this function, a new
ActiveXObject("Microsoft.XMLDOM") is made, then it's saved once the
updated table entries are saved.

 

[Asen Bozhilov]

My project consists of three:

1.main.html
2.paintTable.js
3.saveTable.js

Does this design make sense? How would you do it?

It depends on the meaning of the word "table".

..---------------------,
| 1 | data | data |
|---------------------|
| 2 | data | data |
|---------------------|
| 3 | data | data |
|---------------------|
| 4 | data | data |
`---------------------'

The example above it is table too. One possible approach is:

function Table() {
this.rows = [];
}

Table.prototype.addRow = function() {
//push the new row
};

Table.prototype.draw = function () {
//implement draw
};

Table.prototype.toXML = function () {
//return XML string
};

Table.prototype.toHTML = function () {
//return HTML string
};

 

[Kevin]

Thanks, Asen.

In particular, I'd like to know:

Let's say I draw a button from a function called from main.html. If I
change a button's functionality in a function, let's say by adding:

//////////////////////

main.html

paintPage();
makeAButton();

// end main.html

makeAButton.js

var aButton = document.getElementById("aButton");
aButton.onClick = saveToXML();

function saveToXML()
{
// save as XML file
}
//////////////////////

Will the button, "aButton," still have the saveToXML functionality at
main.html?

 

[Garrett Smith]

Thanks, Asen.

In particular, I'd like to know:

Let's say I draw a button from a function called from main.html. If I
change a button's functionality in a function, let's say by adding:

//////////////////////

main.html

paintPage();
makeAButton();

// end main.html

makeAButton.js

var aButton = document.getElementById("aButton");
aButton.onClick = saveToXML();

Careful, it's `onclick`, not `onClick`.

function saveToXML()
{
// save as XML file

The `this` value for this function call is supplied by the caller. It is
the base object of the caller that in your case, is getting supplied by
the "onclick" handler, which will be `aButton` (this === aButton).

}
//////////////////////

Will the button, "aButton," still have the saveToXML functionality at
main.html?

If `saveToXML` is defined when the onclick is assigned, then the
reference will be retained.

 

[Kevin]

Thank you, Garrett.

If `saveToXML` is defined when the onclick is assigned, then the
reference will be retained.

I've tried these three statements separately, but none work for me.
--------------------------------------------------------------------------------
function saveXML2(StringQuery)
{
var myButton = document.getElementsByName("saveButton")
[0].childNodes[0];

myButton.onclick = print();
// myButton.onclick = new Function( "print()");
// myButton.onclick = print;

}

function print()
{
alert("print");
}

 

[Garrett Smith]

function saveXML2(StringQuery)
{
var myButton = document.getElementsByName("saveButton")
[0].childNodes[0];

myButton.onclick = print();
// myButton.onclick = new Function( "print()");
// myButton.onclick = print;

}

function print()
{
alert("print");
}

Browsers have a window.print method and so if this is global code, you
should use a different name.

Assignment to event handler properties requires a function. Some
browsers accept a string but that is not interoperable. The code:

myButton.onclick = print();

invokes the `print` method and assigns the result to myButton.onclick.
The `print` method returns undefined and so the assignment is equivalent to:

myButton.onclick = undefined;

-- not what you wanted.

Try:
<button id="saveButton">...</button>

<script type="text/javascript">
var saveButton = document.getElementById("saveButton");
saveButton.onclick = saveButtonClickHandler;

function saveButtonClickHandler(ev) {
alert(this.tagName);
}
</script>

Possibly related:
<http://jibbering.com/faq/#accessElementBeforeDefined>