473,386 Members | 1,962 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > two questions

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Two questions

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.rowInde x)'>";

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(rowIn dex);
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!!
Jul 23 '05 #1
4 1127
Henry Su wrote:
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()';
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.
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.rowInde x)'>";

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(rowIn dex);
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!!

Jul 23 '05 #2
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()';
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.


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.

Jul 23 '05 #3
Mick White <mw******@BOGUSrochester.rr.com> wrote in message news:<Gi*******************@twister.nyroc.rr.com>. ..
Henry Su wrote:
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()';
Just create a function:
function whichEvent(){
if(a==b) return abc();
return def();
}


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.


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.rowInde x)'>";

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(rowIn dex);
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!!

Jul 23 '05 #4
Henry Su wrote:
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()';
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).
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.
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">
Although the type attribute's value is case-insensitive, you should
lowercase MIME types always.
i=1;
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.rowInde x)'>"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^ 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)) ^^^^
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(rowIn dex);
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;
What is this `currentCol1'? It is neither declared nor defined in your
source code.
}
}

</script>
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;
}
}
}
}
</script>
<html>
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.org/>
<head>
<title>Document</title>
<http://www.w3.org/QA/Tips/good-titles>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
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">
</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>
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);
}
</script>
</form>
</body>
</html>

THANKS AGAIN!!


You're welcome. And please repair your keyboard, thanks.
PointedEars
Jul 23 '05 #5
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
All Interview Questions And Answers
by: softwareengineer2006 | last post by:
All Interview Questions And Answers 10000 Interview Questions And Answers(C,C++,JAVA,DOTNET,Oracle,SAP) I have listed over 10000 interview questions asked in interview/placement test papers for...
.NET Framework
0
VIEW, RATE & SHARE Interview Questions and experiences
by: connectrajesh | last post by:
INTERVIEWINFO.NET http://www.interviewinfo.net FREE WEB SITE AND SERVICE FOR JOB SEEKERS /FRESH GRADUATES NO ADVERTISEMENT
C / C++
2
Full eBook with 4000 .NET 3.0 ,C#, Ajax,JAVA,.NET and SQL Server Interview questions
by: freepdfforjobs | last post by:
Full eBook with 4000 C#, JAVA,.NET and SQL Server Interview questions http://www.questpond.com/SampleInterviewQuestionBook.zip Download the JAVA , .NET and SQL Server interview sheet and rate...
Javascript
4
Displaying questions grouped into categories and subcategories
by: Drew | last post by:
I posted this to the asp.db group, but it doesn't look like there is much activity on there, also I noticed that there are a bunch of posts on here pertaining to database and asp. Sorry for...
ASP / Active Server Pages
8
Python Interview Questions
by: Krypto | last post by:
Hi, I have used Python for a couple of projects last year and I found it extremely useful. I could write two middle size projects in 2-3 months (part time). Right now I am a bit rusty and trying...
Python
0
see all dotnet questions
by: ramu | last post by:
C# Interview Questions and Answers8 http://allinterviewsbooks.blogspot.com/2008/07/c-interview-questions-and-answers8.html C# Interview Questions and Answers7...
.NET Framework
1
see for dotnet questions
by: ramu | last post by:
C# Interview Questions and Answers8 http://allinterviewsbooks.blogspot.com/2008/07/c-interview-questions-and-answers8.html C# Interview Questions and Answers7...
.NET Framework
0
all dot net interview questions
by: ramu | last post by:
C# Interview Questions and Answers8 http://allinterviewsbooks.blogspot.com/2008/07/c-interview-questions-and-answers8.html C# Interview Questions and Answers7...
ASP.NET
0
ASP Interview Questions ASP Interview Questions
by: reema | last post by:
EJB Interview Questions http://interviewdoor.com/technical/EJB-Interview-Questions.htm CSS Interview Questions http://interviewdoor.com/technical/CSS-Interview-Questions.htm C Interview Questions...
ASP / Active Server Pages
0
<<<<<<<<<<<<ASP Interview Questions >>>>>>>>>...
by: reema | last post by:
EJB Interview Questions http://interviewdoor.com/technical/EJB-Interview-Questions.htm CSS Interview Questions http://interviewdoor.com/technical/CSS-Interview-Questions.htm C Interview Questions...
ASP / Active Server Pages
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!