Two questions

**Mick White** · Jul 23 '05, 12:21 PM

Re: Two questions

Henry Su wrote:
[color=blue]
> New to Javascript and have two questions, thanks in advance for any
> pointers!!
>
> 1) Is there a way to change the property of an eventHandler, for
> example -> <button id='btn123' onClick='abc()' > then after a user
> input is dected ELSEWHERE, change the same button to behave
> differently, eg. <button id='btn123' onClick='def()' >?
>
> I tried this (a shot in the dark):
> var button = document.getEle mentById('123') ;
> button.onClick = 'def()';[/color]

Just create a function:
function whichEvent(){
if(a==b) return abc();
return def();
}
[color=blue]
>
> 2) The second question is slightly more complex - I have found a
> snippet of code on the web that adds and removes rows to a table
> dynamically, the key when removing a row is that the function realigns
> all the row below the one removed so that the IDs will be consecutive
> (convenient for the next stage processing).
>
> However, when the html table is wrapped in a form, the Remove button
> stops working - I GOT AROUND THE PROBLEM WITH ANCHORS - but the
> question is still quite baffling - the error associated is that Object
> doesn't support this property or method at line 1, char 1.
>
> Attached please find the shortened version of the code - if the form
> tags are taken out - then the code works fine.[/color]

Sorry, looks good to me, URL?
Mick
[color=blue]
>
> <script type="text/JavaScript">
> i=1;
> function addRow(id){
>
> var col1 = "<input type='text' id='email"+i+"' size='30'
> maxlength='255' >";
> var col3 = "<input type='button' name='remove' value='Remove'
> onClick='remove (this.parentNod e.parentNode.ro wIndex)'>";
>
> var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY"
> )[0];
> var row = document.create Element("TR" )
>
> var td1 = document.create Element("TD" )
> td1.appendChild (document.creat eElement(col1))
>
> var td3 = document.create Element("TD" )
> td3.appendChild (document.creat eElement(col3))
>
>
> i=i+1;
> row.appendChild (td1);
> row.appendChild (td3);
> tbody.appendChi ld(row);
> }
>
> function remove(rowIndex ){
> document.getEle mentById('myTab le').deleteRow( rowIndex);
> i = i-1;
> var rows=document.g etElementsByTag Name("TR");
> for (k = rowIndex; k < rows.length; k ++) {
> inputs = rows[k].getElementsByT agName("input") ;
> currentCol1 = inputs[0];
> currentCol1.id = "email" + k;
> }
> }
>
> </script>
>
>
> <html>
> <head>
> <title>Document </title>
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">
> </head>
> <body>
>
>
> <form>
>
>
> <table id="myTable" cellspacing="0" border="1">
> <tbody>
> <tr>
> <td>row1_column 1</td><td align="center"> row3_column3</td>
> </tr>
> </tbody>
> </table>
> <a href="javascrip t:addRow('myTab le')">Add row</a>
>
>
> </form>
>
>
> </body>
> </html>
>
>
>
> THANKS AGAIN!![/color]

**Lee** · Jul 23 '05, 12:21 PM

Re: Two questions

Henry Su said:[color=blue]
>
>New to Javascript and have two questions, thanks in advance for any
>pointers!!
>
>1) Is there a way to change the property of an eventHandler, for
>example -> <button id='btn123' onClick='abc()' > then after a user
>input is dected ELSEWHERE, change the same button to behave
>differently, eg. <button id='btn123' onClick='def()' >?
>
>I tried this (a shot in the dark):
>var button = document.getEle mentById('123') ;
>button.onCli ck = 'def()';[/color]

The attribute name is "onclick", not "onClick".
It's value needs to be a reference to a function, not a string:

button.onclick = def; // no parentheses

[color=blue]
>2) The second question is slightly more complex - I have found a
>snippet of code on the web that adds and removes rows to a table
>dynamically, the key when removing a row is that the function realigns
>all the row below the one removed so that the IDs will be consecutive
>(convenient for the next stage processing).
>
>However, when the html table is wrapped in a form, the Remove button
>stops working - I GOT AROUND THE PROBLEM WITH ANCHORS - but the
>question is still quite baffling - the error associated is that Object
>doesn't support this property or method at line 1, char 1.
>
>Attached please find the shortened version of the code - if the form
>tags are taken out - then the code works fine.[/color]

It works for me (only in IE, by the way), if I rename function
"remove" to "removeRow" . The name "remove" collides with an
existing function.

**Henry Su** · Jul 23 '05, 12:22 PM

Re: Two questions

Mick White <mwhite13@BOGUS rochester.rr.co m> wrote in message news:<GiPLc.555 23$yd5.33664@tw ister.nyroc.rr. com>...[color=blue]
> Henry Su wrote:
>[color=green]
> > New to Javascript and have two questions, thanks in advance for any
> > pointers!!
> >
> > 1) Is there a way to change the property of an eventHandler, for
> > example -> <button id='btn123' onClick='abc()' > then after a user
> > input is dected ELSEWHERE, change the same button to behave
> > differently, eg. <button id='btn123' onClick='def()' >?
> >
> > I tried this (a shot in the dark):
> > var button = document.getEle mentById('123') ;
> > button.onClick = 'def()';[/color]
>
> Just create a function:
> function whichEvent(){
> if(a==b) return abc();
> return def();
> }[/color]

I guess the question is more about setting the property of the onClick
event or any other events on the fly (a more conceptual one). Thanks
for the practical suggestion, though.

[color=blue]
>[color=green]
> >
> > 2) The second question is slightly more complex - I have found a
> > snippet of code on the web that adds and removes rows to a table
> > dynamically, the key when removing a row is that the function realigns
> > all the row below the one removed so that the IDs will be consecutive
> > (convenient for the next stage processing).
> >
> > However, when the html table is wrapped in a form, the Remove button
> > stops working - I GOT AROUND THE PROBLEM WITH ANCHORS - but the
> > question is still quite baffling - the error associated is that Object
> > doesn't support this property or method at line 1, char 1.
> >
> > Attached please find the shortened version of the code - if the form
> > tags are taken out - then the code works fine.[/color]
>
> Sorry, looks good to me, URL?
> Mick
>[color=green]
> >
> > <script type="text/JavaScript">
> > i=1;
> > function addRow(id){
> >
> > var col1 = "<input type='text' id='email"+i+"' size='30'
> > maxlength='255' >";
> > var col3 = "<input type='button' name='remove' value='Remove'
> > onClick='remove (this.parentNod e.parentNode.ro wIndex)'>";
> >
> > var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY"
> > )[0];
> > var row = document.create Element("TR" )
> >
> > var td1 = document.create Element("TD" )
> > td1.appendChild (document.creat eElement(col1))
> >
> > var td3 = document.create Element("TD" )
> > td3.appendChild (document.creat eElement(col3))
> >
> >
> > i=i+1;
> > row.appendChild (td1);
> > row.appendChild (td3);
> > tbody.appendChi ld(row);
> > }
> >
> > function remove(rowIndex ){
> > document.getEle mentById('myTab le').deleteRow( rowIndex);
> > i = i-1;
> > var rows=document.g etElementsByTag Name("TR");
> > for (k = rowIndex; k < rows.length; k ++) {
> > inputs = rows[k].getElementsByT agName("input") ;
> > currentCol1 = inputs[0];
> > currentCol1.id = "email" + k;
> > }
> > }
> >
> > </script>
> >
> >
> > <html>
> > <head>
> > <title>Document </title>
> > <meta http-equiv="Content-Type" content="text/html;
> > charset=iso-8859-1">
> > </head>
> > <body>
> >
> >
> > <form>
> >
> >
> > <table id="myTable" cellspacing="0" border="1">
> > <tbody>
> > <tr>
> > <td>row1_column 1</td><td align="center"> row3_column3</td>
> > </tr>
> > </tbody>
> > </table>
> > <a href="javascrip t:addRow('myTab le')">Add row</a>
> >
> >
> > </form>
> >
> >
> > </body>
> > </html>
> >
> >
> >
> > THANKS AGAIN!![/color][/color]

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 12:25 PM

Re: Two questions

Henry Su wrote:[color=blue]
> 1) Is there a way to change the property of an eventHandler, for
> example -> <button id='btn123' onClick='abc()' > then after a user
> input is dected ELSEWHERE, change the same button to behave
> differently, eg. <button id='btn123' onClick='def()' >?
>
> I tried this (a shot in the dark):
> var button = document.getEle mentById('123') ;
> button.onClick = 'def()';[/color]

This cannot work. You must distinguish between the markup and the way it
is reflected by the DOM. The (proprietary) property of the element object
is `onclick' and ECMAScript/J(ava)Script is case-sensitive (XHTML is
case-sensitive, too, so the attribute name is `onclick' there, too; you
should get used to write tag and attribute names lowercase). The property
value is either `null' or a reference to a Function object that is the
event listener. So you need to write

button.onclick = function()
{
def();
};

A more standards compliant way would be

button.addEvent Listener(
"click",
function()
{
def();
},
false);

but since there is no standards compliant way to get a reference
to the previous event listener for the removeEventList ener() method
(unless I have overlooked it), both listeners would be called then
in order.
[color=blue]
> 2) The second question is slightly more complex - I have found a
> snippet of code on the web that adds and removes rows to a table
> dynamically, the key when removing a row is that the function
> realigns all the row below the one removed so that the IDs will
> be consecutive (convenient for the next stage processing).[/color]

This is nothing that the function does but the layout engine of the
UA. Table rows ("tr") are descendants of "table" elements, if a row
is hidden with display:none or the node is removed, the rows align by
design, automatically. I seriously doubt you have any clue on how the
snippet is intended to work, and these would be really bad preconditions
for you to understand what to do to make it work, if not making the
task impossible.
[color=blue]
> However, when the html table is wrapped in a form, the Remove button
> stops working - I GOT AROUND THE PROBLEM WITH ANCHORS - but the
> question is still quite baffling - the error associated is that Object
> doesn't support this property or method at line 1, char 1.[/color]

When reporting errors you should be precise because anything
else, including shouting and complaining, does not help those
who could help you but (also) pisses them off.
[color=blue]
> Attached please find the shortened version of the code - if the form
> tags are taken out - then the code works fine.[/color]

Sure?
[color=blue]
> <script type="text/JavaScript">[/color]

Although the type attribute's value is case-insensitive, you should
lowercase MIME types always.
[color=blue]
> i=1;[/color]

That global variable is undeclared. Use the `var' keyword prior.
[color=blue]
> function addRow(id){
>
> var col1 = "<input type='text' id='email"+i+"' size='30'
> maxlength='255' >";
> var col3 = "<input type='button' name='remove' value='Remove'
> onClick='remove (this.parentNod e.parentNode.ro wIndex)'>";[/color]
^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^ ^[color=blue]
> var tbody = document.getEle mentById(id).ge tElementsByTagN ame("TBODY"
> )[0];
> var row = document.create Element("TR" )
>
> var td1 = document.create Element("TD" )
> td1.appendChild (document.creat eElement(col1))[/color]
^^^^[color=blue]
> var td3 = document.create Element("TD" )
> td3.appendChild (document.creat eElement(col3))[/color]
^^^^
This works in Internet Explorer only. The standards compliant syntax
for document.create Element() is

document.create Element(tagName )

Attribute values must be assigned as property values to the object that the
return value of this method refers to later, if, and only if, an object is
referred to.
[color=blue]
> i=i+1;
> row.appendChild (td1);
> row.appendChild (td3);
> tbody.appendChi ld(row);
> }
>
> function remove(rowIndex ){
> document.getEle mentById('myTab le').deleteRow( rowIndex);
> i = i-1;
> var rows=document.g etElementsByTag Name("TR");
> for (k = rowIndex; k < rows.length; k ++) {
> inputs = rows[k].getElementsByT agName("input") ;
> currentCol1 = inputs[0];
> currentCol1.id = "email" + k;[/color]

What is this `currentCol1'? It is neither declared nor defined in your
source code.
[color=blue]
> }
> }
>
> </script>[/color]

Here is a less error-prone rewrite that should work with all compliant UAs
(untested):

<script type="text/javascript">
var i = 1;

function addRow(id)
{
var tbody = document.getEle mentById(id);
if (tbody
&& (tbody = getElementsByTa gName("tbody"))
&& (tbody = tbody[0]))
{
var row = document.create Element("tr");
if (row)
{
var td1 = document.create Element("td");
var o;
if (td1)
{
o = document.create Element("input" );
if (o)
{
o.type = "text";
o.id = "email" + i;
o.size = 30;
o.maxlength = 255;
td1.appendChild (o)
}
}

var td3 = document.create Element("td");
if (td3)
{
o = document.create Element("input" );
o.type = "button";
o.name = "remove"
o.value = "Remove";
o.onclick = new Function(
"remove('" + id + "', this.parentNode .parentNode.row Index)");
td3.appendChild (o);
}

i++;

row.appendChild (td1);
row.appendChild (td3);
tbody.appendChi ld(row);
}
}
}

function remove(id, rowIndex)
{
var o = document.getEle mentById(id);
if (o)
{
o.deleteRow(row Index);
}

i--;

var rows = document.getEle mentsByTagName( "tr");
if (rows)
{
for (var k = rowIndex, len = rows.length; k < len; k++)
{
var inputs = rows[k].getElementsByT agName("input") ;
if (inputs && (inputs = inputs[0]))
{
// TODO: currentCol1 is undefined
currentCol1 = inputs;
currentCol1.id = "email" + k;
}
}
}
}
</script>
[color=blue]
> <html>[/color]

If the "html" element comes after the "script" element, this is not
Valid HTML, and you cannot expect a client-side script to operate
error-free on a DOM reflecting invalid markup. Place the "script"
element within the "head" element. If the script is instead within
an external (.js) file, remove the start and end tags of the "script"
element. They belong in (X)HTML only.

<http://validator.w3.or g/>
[color=blue]
> <head>
> <title>Document </title>[/color]

<http://www.w3.org/QA/Tips/good-titles>
[color=blue]
> <meta http-equiv="Content-Type" content="text/html;
> charset=iso-8859-1">[/color]

If you use scripts within event handler attribute values,
be sure to declare the scripting language used as well:

<meta http-equiv="Content-Script-Type" content="text/javascript">
[color=blue]
> </head>
> <body>
>
>
> <form>
>
>
> <table id="myTable" cellspacing="0" border="1">
> <tbody>
> <tr>
> <td>row1_column 1</td><td align="center"> row3_column3</td>
> </tr>
> </tbody>
> </table>
> <a href="javascrip t:addRow('myTab le')">Add row</a>[/color]

Do not use "javascript :" URIs, see <http://jibbering.com/faq/#FAQ4_24>.
As this is a J(ava)Script-only "link", it should be written dynamically:

<script type="text/javascript">
document.write(
'<a href="#" onclick="addRow ('myTable'); return false;"'
+ '>Add row<\/a>');
</script>

or

<script type="text/javascript">
var a = document.create Element("a");
if (a)
{
a.href = "#";
a.onclick = new Function("addRo w('myTable'); return false;");
var t = document.create TextNode("Add row");
if (t)
{
a.appendChild(t );
}
document.body.a ppendChild(a);
}
</script>
[color=blue]
> </form>
>
>
> </body>
> </html>
>
> THANKS AGAIN!![/color]

You're welcome. And please repair your keyboard, thanks.

PointedEars

Two questions

Two questions

Comment

Comment

Comment

Comment