Two questions

H

Henry Su

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.getElementById('123');
button.onClick = 'def()';


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.



<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.parentNode.parentNode.rowIndex)'>";

var tbody = document.getElementById(id).getElementsByTagName("TBODY"
)[0];
var row = document.createElement("TR" )

var td1 = document.createElement("TD" )
td1.appendChild(document.createElement(col1))

var td3 = document.createElement("TD" )
td3.appendChild (document.createElement(col3))


i=i+1;
row.appendChild(td1);
row.appendChild(td3);
tbody.appendChild(row);
}

function remove(rowIndex){
document.getElementById('myTable').deleteRow(rowIndex);
i = i-1;
var rows=document.getElementsByTagName("TR");
for (k = rowIndex; k < rows.length; k ++) {
inputs = rows[k].getElementsByTagName("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_column1</td><td align="center">row3_column3</td>
</tr>
</tbody>
</table>
<a href="javascript:addRow('myTable')">Add row</a>


</form>


</body>
</html>



THANKS AGAIN!!
 
M

Mick White

Henry said:
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.getElementById('123');
button.onClick = 'def()';
Click to expand...

Just create a function:
function whichEvent(){
if(a==b) return abc();
return def();
}
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.
Click to expand...

Sorry, looks good to me, URL?
Mick
<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.parentNode.parentNode.rowIndex)'>";

var tbody = document.getElementById(id).getElementsByTagName("TBODY"
)[0];
var row = document.createElement("TR" )

var td1 = document.createElement("TD" )
td1.appendChild(document.createElement(col1))

var td3 = document.createElement("TD" )
td3.appendChild (document.createElement(col3))


i=i+1;
row.appendChild(td1);
row.appendChild(td3);
tbody.appendChild(row);
}

function remove(rowIndex){
document.getElementById('myTable').deleteRow(rowIndex);
i = i-1;
var rows=document.getElementsByTagName("TR");
for (k = rowIndex; k < rows.length; k ++) {
inputs = rows[k].getElementsByTagName("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_column1</td><td align="center">row3_column3</td>
</tr>
</tbody>
</table>
<a href="javascript:addRow('myTable')">Add row</a>


</form>


</body>
</html>



THANKS AGAIN!!
Click to expand...
 
L

Lee

Henry Su said:
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.getElementById('123');
button.onClick = 'def()';
Click to expand...

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

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.
Click to expand...

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.
 
H

Henry Su

Mick White said:
Just create a function:
function whichEvent(){
if(a==b) return abc();
return def();
}
Click to expand...

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.




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.
Click to expand...

Sorry, looks good to me, URL?
Mick
<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.parentNode.parentNode.rowIndex)'>";

var tbody = document.getElementById(id).getElementsByTagName("TBODY"
)[0];
var row = document.createElement("TR" )

var td1 = document.createElement("TD" )
td1.appendChild(document.createElement(col1))

var td3 = document.createElement("TD" )
td3.appendChild (document.createElement(col3))


i=i+1;
row.appendChild(td1);
row.appendChild(td3);
tbody.appendChild(row);
}

function remove(rowIndex){
document.getElementById('myTable').deleteRow(rowIndex);
i = i-1;
var rows=document.getElementsByTagName("TR");
for (k = rowIndex; k < rows.length; k ++) {
inputs = rows[k].getElementsByTagName("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_column1</td><td align="center">row3_column3</td>
</tr>
</tbody>
</table>
<a href="javascript:addRow('myTable')">Add row</a>


</form>


</body>
</html>



THANKS AGAIN!!
Click to expand...
Click to expand...
 
T

Thomas 'PointedEars' Lahn

Henry said:
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.getElementById('123');
button.onClick = 'def()';
Click to expand...

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.addEventListener(
"click",
function()
{
def();
},
false);

but since there is no standards compliant way to get a reference
to the previous event listener for the removeEventListener() method
(unless I have overlooked it), both listeners would be called then
in order.
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).
Click to expand...

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.
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.
Click to expand...

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.
Attached please find the shortened version of the code - if the form
tags are taken out - then the code works fine.
Sure?

<script type="text/JavaScript">
Click to expand...

Although the type attribute's value is case-insensitive, you should
lowercase MIME types always.
i=1;
Click to expand...

That global variable is undeclared. Use the `var' keyword prior.
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.parentNode.parentNode.rowIndex)'>"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
var tbody = document.getElementById(id).getElementsByTagName("TBODY"
)[0];
var row = document.createElement("TR" )

var td1 = document.createElement("TD" )
td1.appendChild(document.createElement(col1)) ^^^^
var td3 = document.createElement("TD" )
td3.appendChild (document.createElement(col3))
Click to expand...
^^^^
This works in Internet Explorer only. The standards compliant syntax
for document.createElement() is

document.createElement(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.
i=i+1;
row.appendChild(td1);
row.appendChild(td3);
tbody.appendChild(row);
}

function remove(rowIndex){
document.getElementById('myTable').deleteRow(rowIndex);
i = i-1;
var rows=document.getElementsByTagName("TR");
for (k = rowIndex; k < rows.length; k ++) {
inputs = rows[k].getElementsByTagName("input");
currentCol1 = inputs[0];
currentCol1.id = "email" + k;
Click to expand...

What is this `currentCol1'? It is neither declared nor defined in your
source code.
}
}

</script>
Click to expand...

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.getElementById(id);
if (tbody
&& (tbody = getElementsByTagName("tbody"))
&& (tbody = tbody[0]))
{
var row = document.createElement("tr");
if (row)
{
var td1 = document.createElement("td");
var o;
if (td1)
{
o = document.createElement("input");
if (o)
{
o.type = "text";
o.id = "email" + i;
o.size = 30;
o.maxlength = 255;
td1.appendChild(o)
}
}

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

i++;

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

function remove(id, rowIndex)
{
var o = document.getElementById(id);
if (o)
{
o.deleteRow(rowIndex);
}

i--;

var rows = document.getElementsByTagName("tr");
if (rows)
{
for (var k = rowIndex, len = rows.length; k < len; k++)
{
var inputs = rows[k].getElementsByTagName("input");
if (inputs && (inputs = inputs[0]))
{
// TODO: currentCol1 is undefined
currentCol1 = inputs;
currentCol1.id = "email" + k;
}
}
}
}
<html>
Click to expand...

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.

<head>
<title>Document</title>
Click to expand...

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
Click to expand...

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

</head>
<body>


<form>


<table id="myTable" cellspacing="0" border="1">
<tbody>
<tr>
<td>row1_column1</td><td align="center">row3_column3</td>
</tr>
</tbody>
</table>
<a href="javascript:addRow('myTable')">Add row</a>
Click to expand...

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.createElement("a");
if (a)
{
a.href = "#";
a.onclick = new Function("addRow('myTable'); return false;");
var t = document.createTextNode("Add row");
if (t)
{
a.appendChild(t);
}
document.body.appendChild(a);
}
</form>


</body>
</html>

THANKS AGAIN!!
Click to expand...

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


PointedEars
 

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

Only one table shows up with the information 2
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
Sort by number of characters 1
How to have two html audio players on one page? 0
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Getting extra blank rows from appending HTML..? 2
Grid Stacking Game Issues 5
Javascript DOM 1

Members online

No members online now.
Total: 33 (members: 1, guests: 32)
Robots: 175

Forum statistics

Threads
473,778
Messages
2,569,605
Members
45,238
Latest member
Top CryptoPodcasts

Latest Threads

Top