JavaScript - Uncaught Typeerror: Cannot Read Property 'addeventlistener' Of Undefined
Good day!
Here is the problem, setting the slider to the site, here's an example: http://wowslider.com/best-jquery-sli...near-demo.html and do not connect different effects on this slider, such as buttons on the sides and smooth shifting slides. When you see the code generates this error: Uncaught TypeError: Cannot read property addEventListener' of undefined I do not know what this error, help, error on this site: http://uh219381.ukrdomen.com/ Or here's the code: http://uh219381.ukrdomen.com/themes/...1/wowslider.js sorry for my English Similar TutorialsWhat i'm trying to accomplish is two things. To select the page i want to load in each tab then select how many of thoughs tabs i wish to open. When the number of tabs is selected i want it to launch. i also have a refresh button that works i just can't get the windows to load. by the way for this project i want it to open the same url that is selected on all of the tabs. Here is what i have: <html> <head> </head> <form name="myform"> <select name="mySelectbox"> <option value="">Choose a destination...</option> <option value="http://www.yahoo.com/">YAHOO</option> <option value="http://www.google.com/">GOOGLE</option> <option value="http://www.altavista.com/">ALTAVISTA</option> <option value="http://www.amazon.com/">AMAZON</option> </select> </form> <form name = "myform2"> <select name = "numberWindows" onchange = "openThem()"> <option value = "0">Choose....</option> <option value = "1">TEST</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> </select> </form> <script> function open_win() { var myurl = parseInt(document.myform.myselectbox.value); window.open("myurl"); } </script> <script type = "text/javascript"> var i; function openThem() { var val = parseInt(document.myform2.numberWindows.value); for (i =0; i < val; i++) { open_win(); } } document.write('<form><input type=button value="Refresh To Do Again" onClick="history.go()"></form>') </script> </body> </html> Can someone please help. I'm just trying to learn how this is done. Thanks. The line "xmlHttp.onreadystatechange = function()" Does the following error, i dont know whats wrong. The code: Code: function MakeRequest() { var xmlHttp = getXMLHttp(); var page = document.getElementById("page").value; var content = document.getElementById("code").value; xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status==200) { HandleResponse(xmlHttp.responseText); } } xmlHttp.open("POST", "edit.save.php", true); xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlHttp.send("page="+page+"&content="+content+""); } function getXMLHttp() { var xmlHttp try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch(e) { //Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { alert("Your browser does not support AJAX!") return false; } } } } function HandleResponse(response) { document.getElementById('SavedFile').innerHTML = response; } I've been using this javascript (menu.js) for a drop down navigation menu for my site. Everything works well on it but in multiple browsers I get this error occurring on line 7 and 16 which is the d.className = "menuHover"; and d.className = "menuNormal"; Code: function expand(s) { var td = s; var d = td.getElementsByTagName("div").item(0); td.className = "menuHover"; d.className = "menuHover"; } function collapse(s) { var td = s; var d = td.getElementsByTagName("div").item(0); td.className = "menuNormal"; d.className = "menuNormal"; } Im new to this whole thing. What needs to be done to solve this? Appreciate the help. Hi, This is my first post while learning Javascript and jQuery as total noob. I have something like this: Code: var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so"; var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more"; alert(shortText ); It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2. I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help! AJ Hello, I'm hoping someone can help me with this. I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example - http://www.cems.uwe.ac.uk/~r4-george...g/products.php Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages. Here is the index.php PHP Code: <?php # index.php /* * This is the main page. * This page includes the configuration file, * the templates, and any content-specific modules. */ // Require the configuration file before any PHP code: require_once ('./modules/config.inc.php'); // Validate what page to show: if (isset($_GET['p'])) { $p = $_GET['p']; } elseif (isset($_POST['p'])) { // Forms $p = $_POST['p']; } else { $p = NULL; } // Determine what page to display: switch ($p) { case 'about': $page = 'about.inc.php'; $page_title = 'About This Site Again'; break; case 'products': $page = 'products.inc.php'; $page_title = 'Products on this site'; break; case 'this': $page = 'this.inc.php'; $page_title = 'This is Another Page.'; break; case 'that': $page = 'that.inc.php'; $page_title = 'That is Also a Page.'; break; case 'contact': $page = 'contact.inc.php'; $page_title = 'Contact Us'; break; case 'search': $page = 'search.inc.php'; $page_title = 'Search Results'; break; // Default is to include the main page. default: $page = 'main.inc.php'; $page_title = 'Site Home Page'; break; } // End of main switch. // Make sure the file exists: if (!file_exists('./modules/' . $page)) { $page = 'main.inc.php'; $page_title = 'Site Home Page'; } // Include the header file: include_once ('./includes/header.inc'); echo "<div id=\"content\">"; // Include the content-specific module: // $page is determined from the above switch. include ('./modules/' . $page); // Include the footer file to complete the template: include_once ('./includes/footer.inc'); ?> It uses the .inc.php files located in the modules folder to switch between pages. Here is my products.inc.php - PHP Code: <? include("includes/db.php"); include("includes/functions.php"); if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){ $pid=$_REQUEST['productid']; addtocart($pid,1); header("location:shoppingcart.php"); exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Products</title> <script language="javascript"> function addtocart(pid){ document.form1.productid.value=pid; document.form1.command.value='add'; document.form1.submit(); } </script> </head> <body> <form name="form1"> <input type="hidden" name="productid" /> <input type="hidden" name="command" /> </form> <div align="center"> <h1 align="center">Products</h1> <table border="0" cellpadding="2px" width="600px"> <? $result=mysql_query("select * from products"); while($row=mysql_fetch_array($result)){ ?> <tr> <td><img src="<?=$row['picture']?>" /></td> <td> <b><?=$row['name']?></b><br /> <?=$row['description']?><br /> Price:<big style="color:green"> £<?=$row['price']?></big><br /><br /> <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" /> </td> </tr> <tr><td colspan="2"><hr size="1" /></td> <? } ?> </table> </div> </body> </html> This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work. Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following - Quote: Uncaught TypeError: Cannot set property 'value' of undefined addtocart index.php:51 (anonymous function)index.php:83 onclick Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem. If you need any of the code from other pages I can post it too. Thanks in advance. I do not really understand what is happening to my code but it just tell me the following: Code: document.getElementById("#movingword") is null How could the movingword be null when I have declared it in my code? The following is my code: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="language" content="english"> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <title></title> <style type="text/css"> body { background-color:#000; } #scenery { position:relative; } #moving { position:absolute; float:right; top:100px; left:50px; } #movingword { position:absolute; float:right; top:0px; left:0px; } </style> <script type="text/javascript"> var a=120; $(document).ready(function() { document.getElementById("#movingword").style.top = a + "px"; }); </script> </head> <body> <font color=white><h1> Hello World </h1></font> <div id="scenery"> <img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt=""> <div id="moving"> <img src="http://maadinfo.com/images/blinking.gif" alt=""> </div> <div id="movingword"> <font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font> </div> </div> </body> </html> I'm trying to add an event handler for to my body, and for some reason which I can't figure out, it only works on Google Chrome. I wouldn't expect it to work in IE, but am wondering why it's not working in Firefox. Here's the relevant parts of the code: Javascript (in an external file) Code: var body = document.body; body.addEventListener("load", Foo(), false); function Foo(){ addEventListener(document.getElementsByName("start"),"click", alert("hello"), false); } HTML Code: <html> <head> <title>BREAKOUT!</title> <script src="breakout.js" type="text/Javascript" > </script> <LINK REL="stylesheet" HREF="breakout.css" TYPE="text/css"> </head> <body id="body"> <!-- etc.... --> Okay, I'm really am not getting this. So I came here hopefully for some help. I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code: Code: function addEvent(type, func, elem) { var netscape = document.getElementById && !document.all; var ie = document.all; if(netscape) { elem.addEventListener(type, func, true); } else if(ie) { elem.attachEvent('on'+type, func); } } //Which is then call by addEvent('click', someFunction, theElementObject); So say I had the following code like so: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Example</title> <link rel="stylesheet" type="text/css" href="./css/global.css" /> <script type="text/javascript"> function addEvent(type, func, elem) { var netscape = document.getElementById && !document.all; var ie = document.all; if(netscape) { elem.addEventListener(type, func, true); } else if(ie) { elem.attachEvent('on'+type, func); } } function clearTxt() { var username = document.getElementById('username'); if(username.value == 'Screen Name') { username.value = ''; } } addEvent('click', clearTxt, document.getElementById('username')); </script> </head> <body> <label for="username">Username:</label> <input name="username" type="text" value="Screen Name" id="username" maxlength="20" /> </body> </html> From what I can see and what I understand it should just on event of a click on the username input it should clear the username field. But instead I get a error message from IE saying, "null is null or not a object"???? Like that was any help. So could someone please help me figure out my misunderstanding of this method? Thanks, Jon W Hi folks, I'm having problem setting up event handling using member functions. Consider the following code snippet: Code: function Widget() { ... this.register = function() { ... document.getElementById(this.id).addEventListener('click', this.default_click_handler, false); } this.default_click_handler = function(event) { this.do_something_useful(); //<--??? } this.do_something_useful = function() {...} } However I don't manage to call do_something_useful(), I get a this.do_something_useful() is not a function error. What am I doing wrong? Any help is appreciated, Thanks, A. I'm trying to understand how a custom object can call a function within itself. Say I have something like this: Code: function functiontest() { this.prop1 = '', this.prop2 = '', this.options = {initiallevels:0}, this.prop3 = '/blah', this.prop4 = true, this.function4 = function(x) { console.log(x) }, this.init = function(options) { this.uid=options.uid this.t=options.target document.getElementById(this.t).addEventListener('click',function(){this.uid.function4(this.t)},false) } } myfun1=new functiontest myfun1.init({uid:'myfun1',target:'target1'}) myfun2=new functiontest myfun2.init({uid:'myfun2',target:'target2'}) And the html: Code: <html> <head></head> <body> <div id="target1">T1</div> <br> <div id="target2">T2</div> </body> </html> I don't know what to put in the part in bold to set the click event listener and have it call function4 within the functiontest object. I've tried a bunch of different things and nothing worked. Please help, thanks! I have created this statement and it does its job but not very efficient. How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page. Locate id get value and use same value to change the bgColor of the page Code: <input id="red" value="red">red <input id="green" value="green">green <script> document.getElementById('red').addEventListener('click', function (e) { inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true); <script> Your help will be much appreciated! Thanks! Is it possible to add events using addEventListener to multiple radio buttons with same id ? <input id="radId" type="radio" value="0" name="radioname">No <input id="radId" type="radio" value="1" name="radioname">Yes I tried to attach event using document.getelementByID BUT it always picks the first radio button. Is there a way around this, any help would be highly appreciated. Thanks Hi, I have the following code: Code: function addHandlers() { var elementList = new Array(); elementList.push(new Element("newhomesdiv", "images/newhomes.png", "images/newhomes-over.png")); elementList.push(new Element("additionsdiv", "images/additions.png", "images/additions-over.png")); elementList.push(new Element("homeimprovdiv", "images/homeimprove.png", "images/homeimprove-over.png")); elementList.push(new Element("aboutusdiv", "images/aboutus1.png", "images/aboutus-over1.png")); for(var i = 0; i < elementList.length; i++) { var curNode = document.getElementById(elementList[i].parentId).firstChild; var item = elementList[i]; if(curNode) { /*if(curNode.addEventListener) { curNode.addEventListener("mouseover", function(){makeCallback(item.parentId, item.hoverImage)}, false); curNode.addEventListener("mouseout", function(){makeCallback(item.parentId, item.regImage)}, false); } else if(curNode.attchEvent) { curNode.attachEvent("onmouseover", function(){makeCallback(item.parentId, item.hoverImage)}); curNode.attachEvent("onmouseout", function(){makeCallback(item.parentId, item.regImage)}); } else { curNode["onmouseover"] = makeCallback(item.parentId, item.hoverImage); curNode["onmouseout"] = makeCallback(item.parentId, item.regImage); }*/ curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); curNode.onmouseout = makeCallback(item.parentId, item.regImage); } } } function makeCallback(parId, image) { return function() { changeImage(parId, image); }; } function changeImage(parId, image) { document.getElementById(parId).firstChild.src = image; } The curNode.onmouseover = makeCallback(item.parentId, item.hoverImage); works, but I want to use addEventListener and fallback to the other methods. I don't understand why the addEventListener and attachEvent parts doesn't work. Any ideas? Code: function offPar(){ alert(this.offsetParent.id); } function init(){ var mine = document.getElementById("mid"); var other = document.getElementById("inner"); mine.addEventListener("click", offPar, false); other.addEventlistener("click", offPar, false); } window.addEventListener('load', init, false); HTML : <div id = "content"> <div id = "mid"> <div id = "inner"> <p class = "par"> </p> </div> </div> </div> I can add an event listener to the #mid div but I can't to the #inner div. Anyone now why this is? Sorry I can't provide more info. That's all I Know! TTFN John Every time i click on one of the said elements, it puts "undefined" into the textbox each time i click on an element. it seems to me that the Key_Table[x] is not getting passed correctly. How do i make sure that this is getting passed correctly? Here's my Code: Code: <script type='text/javascript'> // Startup Script if (document.addEventListener) { document.addEventListener("DOMContentLoaded", LoadEventListeners, false); } function LoadEventListeners() { var Key_Table = ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"]; // Create event Listeners for the alphabetic keys for(var x = 0; x < Key_Table.length; x++) { Key_Table[x] = document.getElementById(Key_Table[x]); Key_Table[x].addEventListener("click", function(){ InsertChar(Key_Table[x]); }, false); } } function InsertChar(Char) { alert("Char is:" + Char); // Textbox data document.getElementById('TextData').value = document.getElementById('TextData').value + Char; } </script> On my site we have image galleries that pop up over top of the page in a higher z-index and position:fixed, and another div between the gallery and background with opacity set to about 85%. The image gallery div has a close button, and I was asked to make the gallery also close by pressing ESC, so I added this: igevt=function(evt){checkclosegal(evt)} window.addEventListener('keypress',igevt, false) and checkclosegal: function checkclosegal(evt) { if(evt.keyCode==27) { closebgeagal() window.removeEventListener('keypress',igevt, false) } } This works perfectly in Firefox and Opera, but Chrome and Safari don't fire the event (not worried about ie right now - I know it uses attachEvent). Could it have something to do with the gallery being in a higher z-index? Please help, thanks! Hi there Im trying to create a function where i pass two element id's and my script populates it with events and anything else it may need to run but what i am finding is that i cant use this so that the instance of the object is kept what ends up happening is nothing at all what i would like to have happen is the code to work somthing like this... Code: <div id="iAmTheTargetId"> </div> <div id="iWillHoverOverYouId"> </div> <script type="text/javascript"> var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId'); </script> and simply running that would then create the equivalent of doing Code: <div id="iAmTheTargetId" onmouseover="element.activate()" onmouseout="element.deactivate()" onmousemove="element.update(event)> </div> <div id="iWillHoverOverYouId"> </div> <script type="text/javascript"> var element = new hoverBox('iAmTheTargetId','iWillHoverOverYouId'); </script> But of course the code above won't actual add onmouseover and etc it just so you can see what i'm trying to achieve Code: /* * triggerId * the element in which the attributes will be applied to * * hoverBoxid * the element in which will hover around the triggerId */ function hoverBox(triggerId,hoverBoxid){ this.triggerElement = document.getElementById(triggerId); this.hoverBoxElement = document.getElementById(hoverBoxid); if(this.triggerElement == null || this.hoverBoxElement){ return null; } self = this; alert(this.triggerElement); this.triggerElement.addEventListener('mouseover',function(){self.activate();},false); this.triggerElement.addEventListener('mouseout',function(){self.deactivate();},false); this.triggerElement.addEventListener('mousemove',function(){self.update(event);},false); } hoverBox.prototype = { triggerElement : null, hoverBoxElement : null, state : false }; hoverBox.prototype.activate = function(){ this.state = true; }; hoverBox.prototype.deactivate = function(){ if(this.state != false){ this.hoverBoxElement.style.display = "none"; this.state = false; } }; hoverBox.prototype.update = function(evt){ if(this.state != false){ this.hoverBoxElement.style.display = "block"; this.hoverBoxElement.style.position = "absolute"; this.hoverBoxElement.style.top = (evt.clientY + 5)+ "px"; this.hoverBoxElement.style.left = (evt.clientX + 10)+ "px"; } }; A quick note theses function will work by them selfs if you just do Code: <div id="target" onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)"> </div> <div id="hover"> </div> <script type="text/javascript"> var aHoverBox = new hoverBox('iAmTheTargetId','iWillHoverOverYouId'); </script> But not quite what I'm after i would like not to have to enter in Code: onmouseover="aHoverBox.activate()" onmouseout="aHoverBox.deactivate()" onmousemove="aHoverBox.update(event)" and have that done by the JavaScript Well i hope every thing makes scene sorry if i repeated my self just making sure you understand me I've been working on a web-site and I've run into a problem. None of the buttons I've created will access the functions that they're supposed to access. When I used the JavaScript console in Chrome it threw the error Uncaught ReferenceError: (function) is not defined I've looked over it for syntax errors, but I couldn't find any. Am I missing anything? Here's my unfinished code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>N Physics</title> <script type="text/javascript"> var numforms = 0; var curentform = 0; //consider further editing function reset() { window.location.reload(); } function addvar() { currentform = numforms + 1; selectscreen(); } function changevar() { } function selectscreen() { selectdiv = document.createElement('div'); selectdiv.id = "select"; tkdklskjksdkfj variable = document.createElement('SELECT'); variable.setAttribute('Name', 'variable'); variable.id = "variable"; ForceReg = document.createElement('option'); ForceReg.value = '001'; ForceReg.appendChild(document.createTextNode('Force')); variable.appendChild(ForceReg); Mass = document.createElement('option'); Mass.value = '002'; Mass.appendChild(document.createTextNode('Mass')); variable.appendChild(Mass); Accelleration = document.createElement('option'); Accelleration.value = '003'; Accelleration.appendChild(document.createTextNode('Accelleration')); variable.appendChild(Accelleration); selectdiv.appendChild(variable); document.body.appendChild(selectdiv); } function newform() { } function cancel() { } function deleteform() { } fucntion checkprimary() { } function findeq() { } </script> <style type="text/css"> <!-- body { background-color:#999999; } #LayerHead { position:absolute; left:0px; top:0px; width:100%; height:50px; z-index:1; background-color: #000000; } .spacer { height:51px; z-index:0; } .Button { height:50px; z-index:2; } .style1 { color: #FFFFFF; font-size: 43px; z-index:1; } .style2 { color: #FFFFFF; font-size: 10px; z-index:3; } #LeftButton { width: 49%; height: 50px; left: 0px; z-index:2; } #RightButton { width: 49%; height: 50px; right: 0px; z-index:2; } #Bottom { position:fixed; background-color:#000000; width:100%; bottom: 0px; left: 0px; z-index:3; } #select { position: fixed; width: 100%; height: 100%; opacity: 0.7; filter: aplha(opacity=40); background-color:#333333; } #variable { position: fixed; top: 50%; width: 90%; margin-left: auto; margin-right: auto; } --> </style> </head> <body> <div id="LayerHead"> <span class="style1">N Physics</span> </div> <div class="spacer"></div> <div class="Button"> <input type="button" id="LeftButton" value="Instructions" onclick="location.href = 'instructions.html'" /> <input type="button" id="RightButton" value="Reset" onclick="reset();" /> </div> <div id="VarDone"></div> <div class="Button"> <input type="button" id="LeftButton" value="Add a New Variable" onclick="addvar();" /> <input type="button" id="RightButton" value="Find the Equation" onclick="findeq();" /> </div> <div id="Answer"></div> <div id="Bottom"> </div> </body> </html> uncaught exception: Syntax error, unrecognized expression:
Code: :([rel*=qnt_Rc]) I have this code: Code: grpDiv = $$('div:([rel*=' + txt_val + '])'); Which when operaterated on, we have: Code: grpDiv = $$('div:([rel*=qnt_Rc]) This error: uncaught exception: Syntax error, unrecognized expression: Code: :([rel*=qnt_Rc]) Is new. The code in question has been around for about a year and no issues with prototype 1.6.1. Yet we upgraded to 1.7, and this error started showing. any ideas what this could be and how to fix it? thanks Hey folks. I am needing some help with an error I'm getting from a project I'm working on. First off let me preface this all with the fact that I'm a total javascript noob. I'm really trying to understand what I'm doing wrong. So any help or advice is MORE than welcome. Here's what is happening. I found this code that will duplicate a row in a table and modifiy the name of a input in the row. Well for my purposes I have two different tables I need to work with. (each one idividually) So I changed the code a bit to make it accecpt a variable to use for the table name. (before it was static) and now I'm getting a error. Code: Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER)" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://www.tourandtravelnow.com/admin/scripts/faxPageScript.js :: addRow :: line 14" data: no] This is the old code that would work (only for one of the tables) Code: var clone; function cloneRow(){ var rows=document.getElementById('mytab').getElementsByTagName('tr'); var index=rows.length; clone=rows[index-1].cloneNode(true); var inputs=clone.getElementsByTagName('input'), inp, i=0 ; while(inp=inputs[i++]){ inp.name=inp.name.replace(/\d/g,'')+(index+1); } } function addRow(){ var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0]; tbo.appendChild(clone); cloneRow(); } onload=cloneRow; and here is my code that doesn't work. Code: var clone; function cloneRow(mytab){ var rows=document.getElementById(mytab).getElementsByTagName('tr'); var index=rows.length; clone=rows[index-1].cloneNode(true); var inputs=clone.getElementsByTagName('input'), inp, i=0 ; while(inp=inputs[i++]){ inp.name=inp.name.replace(/\d/g,'')+(index+1); } } function addRow(mytab){ alert(mytab); var tbo=document.getElementById(mytab).getElementsByTagName('tbody')[0]; tbo.appendChild(clone); cloneRow(mytab); } onload=cloneRow(mytab); So like I said any help would AWESOME! have a great day. Kevin. |