Using DOM to create text link that uses javascript

I have a function that edits a row so that when the user clicks a text note link, the text note becomes a textbox with the text within it.  When the user clicks the new + button, another javascript function is called that does the opposite.  It takes the text in the textbox and makes it linked text.  
The original anchor tag for the link was like:  <a href="#" onclick="javascript:editNote(this.parentNode.parentNode.rowIndex)">.

Now, I'd like to have a similar link so the user can re-change the text he just edited.  Instead, when I click the link that's created from textbox, it just brings me to the top of the page.  Please look at the code and tell me what I'm doing wrong.

The code below shows just a single row in the table, but there may be multiple rows.

Thank you in advance,
Chris
<script language="javascript">
        function editNote(noteId, rowIndex) {
            var tblRef = document.getElementById("noteTbl");
            var row=tblRef.rows[rowIndex];
            var currLink = row.cells[0].innerHTML;
            var currVal = currLink.substring(currLink.indexOf('">')+2, currLink.toUpperCase().indexOf("</A>"));
            //Delete the cell that contains the link
            row.deleteCell(0);
            //Now insert a cell and create the text box that will go in its place for user to edit
            newCell = row.insertCell(0);
            newText = document.createElement("input");
            newText.type = "text";
            newText.size = "60";
            newText.className = "text";
            newText.id = "noteEdit";
            newText.value = currVal;
            newCell.appendChild(newText);
            //Add the spaces between the textbox and button
            newText = document.createTextNode(" ");
            newCell.appendChild(newText);
            newText = document.createTextNode(" ");
            newCell.appendChild(newText);
            //Now create and add the button
            newBtn = document.createElement("input");
            newBtn.type="button";
            newBtn.id = "editNote";
            newBtn.value = "+";
            newBtn.onclick = function() {editNoteDB(rowIndex, noteId);}
            newCell.appendChild(newBtn);
        }
        function editNoteDB(rowID, noteID) {
            //This function will call the ASP page (via
            //ajaxFunction) to edit the note in the database.
            newValue = document.getElementById("noteEdit").value;
            var tblRef = document.getElementById("noteTbl");
            var row = tblRef.rows[rowID];
            row.deleteCell(0);
            newCell = row.insertCell(0);
            newText = document.createTextNode(newValue);
            link = document.createElement("a");
            link.href="#";
            link.onclick = "javascript:editNote("+noteID+",this.parentNode.parentNode.rowIndex);";
            link.appendChild(newText);
            newCell.appendChild(link);
        }
</script>
<body>
    <table id="noteTbl">
        <tr>
            <td><a href="#" onclick="javascript:editNote(9003,this.parentNode.parentNode.rowIndex);return false;">STRAIGHT THROUGH ASSEMBLY.</a></td>
        </tr>
    </table>
</body>

Open in new window

chrscoteAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

tsibushaCommented:
The "#" in a URL (used in the href attribute) means a point within the page. For example, page.htm#chapter1, page.htm#chapter2, etc.

"javascript:" is a syntax for URLs, instead of "http:". So to create the link, you don't need "onclick" at all. All you need is:


link.href = "javascript:doSomething()"

Open in new window

0
chrscoteAuthor Commented:
By putting the javascript call in the href, I am getting an error when determining the rowIndex of the table.  I get the error message: 'this.parentNode.parentNode.rowIndex' is null or not an object.  If it is in the onclick event, however, this works.
0
chrscoteAuthor Commented:
OK, I've decided to try something else.  Since I'm using ASP to create the original list, I am going to use a counter to include the "rowIndex" rather than using the .rowIndex property.  This appears to work, though I was hoping for more generic code that could be used when I'm not using ASP.
0
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

tsibushaCommented:
You mean, using rowIndex to identify the link? A <tr> object always has a rowIndex that you can access and use. You don't need ASP for this.
0
chrscoteAuthor Commented:
What I mean is that, when I try to use
<a href = "javascript:editNote(9003, this.parentNode.parentNode.rowIndex)">,
I get an error saying that parentNode.parentNode doesn't exist.  However, if I just use ASP to determine which row I'm in so that the link appears as::
<a href = "javascript:editNote(9003, 3)">
It works fine.  I've tried using just this.parentNode.rowIndex as well as simply this.rowIndex as well with the same issues.

Chris
0
chrscoteAuthor Commented:
I've never received an accepted solution, so I will close it now.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.