Hmm this forum really doesn't give you long enough to type in your question before logging you out.. well here goes my second attempt:
I'm trying to teach myself javascript with dom scripting and am attempting to write an application as I learn. It's been going fine but I've ran into a problem which is driving me crazy.
I'll start off by explaining what I'm trying to achieve... I'm simply trying to insert an input button into a table at a specific place which calls a function when clicked. For examples sake I'm trying to place it into row 3, column 4 of the table.
So I started off by creating an button that called the javascript to insert that button. This works fine. In the script I first define the new element like so : - var newDelete = document.createElement('input');
-
newDelete.setAttribute('type', 'button');
-
newDelete.setAttribute('value', 'delete');
-
newDelete.setAttribute('onclick', 'test();');
I then insert it into the correct place in the table : - document.getElementsByTagName('table')[0].firstChild.childNodes[2].childNodes[3].appendChild(newDelete);
I realise there are probably better ways to find the correct 'td' in the table but I'm a newbie.
At first it appears to run fine... I click the static button, and the new button appears in the table at the correct position. You can even click the button!!! However, clicking the button does not call the test() function as expected. Looking at the generated html the button looks ok : - <INPUT onclick=test(); type=button value=delete>
To test whether it was a problem with the html generated I copied the button html into a separate html page and opened it. The button appeared... clicking it called the test() function!
So even though these two buttons are effectively the same... clicking the dynamically generated button does not call the test() function... while clicking the static one does...
Any help would be greatly appreciated!
Ben.
18 2627 gits 5,390
Recognized Expert Moderator Expert
hi ...
try to not use the setAttribute-method for it ... use something like that: - var click_handler = function(this) {
-
alert(this.nodeName);
-
};
-
-
newDelete.onclick = click_handler;
kind regards
You were pretty close. - var B= document.createElement('input')
-
B.type= 'button';
-
B.value= 'Delete';
-
B.onclick= test; // reference the function, don't call() it here
.
Finding a particular cell in a table is a common and tiresome task, you might want a function just for that. - function getCell(t,r,c){
-
t= document.getElementsByTagName('table')[t-1];
-
r= t.getElementsByTagName('tr')[r-1];
-
var tem,i= 0;
-
while(r.childNodes[i] && c>0){
-
tem= r.childNodes[i];
-
if(/^(td|th)$/i.test(tem.nodeName)){
-
if(--c== 0) return tem;
-
}
-
++i;
-
}
-
return null;
-
}
To add the button defined above to the first table, third row, fourth cell: getCell(1,3,4). appendChild(B);
Hmm this forum really doesn't give you long enough to type in your question before logging you out.. well here goes my second attempt:
I'm trying to teach myself javascript with dom scripting and am attempting to write an application as I learn. It's been going fine but I've ran into a problem which is driving me crazy.
I'll start off by explaining what I'm trying to achieve... I'm simply trying to insert an input button into a table at a specific place which calls a function when clicked. For examples sake I'm trying to place it into row 3, column 4 of the table.
So I started off by creating an button that called the javascript to insert that button. This works fine. In the script I first define the new element like so : - var newDelete = document.createElement('input');
-
newDelete.setAttribute('type', 'button');
-
newDelete.setAttribute('value', 'delete');
-
newDelete.setAttribute('onclick', 'test();');
I then insert it into the correct place in the table : - document.getElementsByTagName('table')[0].firstChild.childNodes[2].childNodes[3].appendChild(newDelete);
I realise there are probably better ways to find the correct 'td' in the table but I'm a newbie.
At first it appears to run fine... I click the static button, and the new button appears in the table at the correct position. You can even click the button!!! However, clicking the button does not call the test() function as expected. Looking at the generated html the button looks ok : - <INPUT onclick=test(); type=button value=delete>
To test whether it was a problem with the html generated I copied the button html into a separate html page and opened it. The button appeared... clicking it called the test() function!
So even though these two buttons are effectively the same... clicking the dynamically generated button does not call the test() function... while clicking the static one does...
Any help would be greatly appreciated!
Ben.
Have a look at this ............... -
function addChild()
-
{
-
var ref = document.createElement("input");
-
ref.setAttribute("type","text");
-
.
-
.
-
typeof window.attachEventListener ? ref.attachEventListener("click",test,true) : ref.addEventListener("onclick",test);
-
document.getElementById('some_id').appendChild(ref);
-
}
-
function test()
-
{
-
//some code
-
}
-
Debasis Jana
ajos 283
Contributor - <INPUT onclick=test(); type=button value=delete>
Ben.
hey ben,
i doubt the way you ve declared the above line,though im not sure abt wat you are doing with this, i think you shud do something like this--> -
<INPUT type="button" value="delete" onclick="test()">
-
just give it a try:)
regards,
ajos
Thanks for all your quick replies! Eliminating the setAttributes and referencing the function rather than calling it (thanks mrhoo!) made the button work finally. And that cell finding function will no doubt save me a LOT of time.
Thanks again everyone!
Hmmm another problem hehe...
this example required no values be be passed to the test function ... however the actual application needs the name of the input button to be passed to the test function... now as adding (this.name) to the onclick attribute causes loss of function to the button... how might I achieve this?
Ben.
Hmmm another problem hehe...
this example required no values be be passed to the test function ... however the actual application needs the name of the input button to be passed to the test function... now as adding (this.name) to the onclick attribute causes loss of function to the button... how might I achieve this?
Ben.
Post your Code and tell what you are not achieving.
Debasis Jana
The real application lets you enter values into a form then click a button which then adds a row to a table containing these values. A button is the added to the end of the row which when clicked deletes this row. Now when I create the row I will assign the postion of the row in the table as its name attribute, and ideally when this delete button is clicked it will pass its name to a function so the function knows which row to delete. - var newDelete = document.createElement('input');
-
newDelete.type = 'button';
-
newDelete.name = 'row2';
-
newDelete.value = 'delete';
-
newDelete.onclick = test;
-
document.getElementsByTagName('table')[0].firstChild.childNodes[emptyRowNum].childNodes[5].appendChild(newDelete);
The above code creates the delete button. As discussed above the dynamically created button will not call the test function if the onclick attribute is assigned as 'test()' but will work when its assigned as 'test'. However, this will not allow me to pass the name of the input button to the test function by using 'test(this.name )'.
Any help would be greatly appreciated .
Ben.
The real application lets you enter values into a form then click a button which then adds a row to a table containing these values. A button is the added to the end of the row which when clicked deletes this row. Now when I create the row I will assign the postion of the row in the table as its name attribute, and ideally when this delete button is clicked it will pass its name to a function so the function knows which row to delete. - var newDelete = document.createElement('input');
-
newDelete.type = 'button';
-
newDelete.name = 'row2';
-
newDelete.value = 'delete';
-
newDelete.onclick = test;
-
document.getElementsByTagName('table')[0].firstChild.childNodes[emptyRowNum].childNodes[5].appendChild(newDelete);
The above code creates the delete button. As discussed above the dynamically created button will not call the test function if the onclick attribute is assigned as 'test()' but will work when its assigned as 'test'. However, this will not allow me to pass the name of the input button to the test function by using 'test(this.name )'.
Any help would be greatly appreciated .
Ben.
Is that necessary to pass that? -
.
-
.
-
button_ref.setAttribute("id","some_id");
-
.
-
.
-
function test()
-
{
-
alert(document.getElementById("some_id").getAttribute("name"));
-
}
-
Debasis Jana
Sign in to post your reply or Sign up for a free account.
Similar topics |
by: KathyB |
last post by:
Hi, I'm trying to find a way to validate input text boxes where I
don't know the names until the page is rendered. I've got 2 validate
functions that fire with the onsubmit button of a "mini" form within
the html document.
When the Finish button is clicked, I need to check for any empty input
boxes before loading the next aspx page...but it could be no boxes or
five boxes, etc.?
I've included my html output...if you have any ideas,...
|
by: MikeC |
last post by:
For ASP.Net/C Sharp
I have an XML file and an associated XSL file. I am using the
System.Web.UI.Controls.Xml control to render the resulting HTML. This
seems to work fine with one slight drawback. I cannot seem to find a
way to attach to the events generated by controls generated by the XSL
transformation.
I have tried the FindControl on the page, but it does not find the
control. There must be something I am doing wrong because I...
|
by: Wysiwyg |
last post by:
Hi, I just thought I'd post this since I didn't see anyone else doing it
this way. I wanted to be able to force the enter key to submit the form
without manually changing the html form,
In my custom base page class I added a generic method I can call to handle
the user pressing the enter key when I want it to submit the form. This sets
the destination button on a for the entire form rather than on a
field-by-field basis; i.e. it's not...
|
by: Jack |
last post by:
THE FOLLOWING IS A PART OF CODE FROM A ASP PAGE
<%
sql01 = "SELECT COUNT(*) AS reccount FROM Equipmenttbl "
sql01 = sql01 & "WHERE Equipmenttbl.GrantID = " & GrantID
'Response.Write sql01 & "<br>"
'Response.End
i = 0
|
by: ShaneFowlkes |
last post by:
I created a couple of quick test pages and to my surprise, these do not work
either. When I click "Go Back" on test2.aspx, nothing happens. Ideas??
Surely I must be missing something obvious.....
Thanks
PAGE 1 - test.aspx
<%@ Page Language="VB" %>
| |
by: mk |
last post by:
Greetings all - im new to this newsgroup so pls dont flame me :p
I need some help! Please view the html below in a browser. Or goto this
url -http://firebrain.co.uk/java-problem.htm
(Assuming you have seen the rendered code)
Basically I need the X buttons to change all the values of each textbox
to zero either in the col or row depending on which button is clicked.
Function summery:
If you click on a X button on the right hand side of...
|
by: verbatim |
last post by:
with the following page, the dynamically generated fields are not recognized when i try to submit the form, or add more elements.
when i hit my submit button, the address bar has only x1 - x5 in the query string, and does not append any of the dynamically generated fields.
any ideas how to fix this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
|
by: Srikanth Ram |
last post by:
Hi,
I'm creating a PHP application. In this a dynamic table with the fields in the database is generated in a page. I have placed a checkbox in each row of the table to approve/disapprove according to spec. This checkbox is also created dynamically according to the fields in the database. Now I need to place a checkbox/ button (by checking the checkbox all the checkbox in the page has to be checked). I checked online and I was able to find...
|
by: dwmartin18 |
last post by:
Hello everyone. I have quite the puzzling problem with a script I have been working on lately. I have created a function that can be called to create a new html element (e.g. input, select, div, etc.). It is used as follows:
addElementToPage("writeroot", "input", "type:button, text:testText, value:testvalue, onclick:test1")
The first argument is an ID of the location where the new element it to be appended. The second argument is the type...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| |
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |