Setting LinkButton Attributes Using JavaScript

Is there a way to set the attributes of the ASP.Net LinkButton control using JavaScript?

How do I get the following code to work?

myLink is null.

function setLinkButton() {
    var myLink = document.getElementById("lbtnAnotherPage");
}
Ray TurnerSenior ConsultantAsked:
Who is Participating?
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.

infochandruCommented:
I think may be probs with id,
Hope this will help,

 <script type="text/javascript">
    function setLinkButton() {
    var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
    }
    </script>
0
Ray TurnerSenior ConsultantAuthor Commented:
Thanks.  That did not work.
0
infochandruCommented:
can you give me the asp tag for link button that you used?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

infochandruCommented:
Try this code

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function setLinkButton() {
    var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
    myLink.innerHTML="Experts-Exchange";
    myLink.href="http://www.experts-exchange.com";
    myLink.target="_blank";
    return false;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:LinkButton ID="lbtnAnotherPage" Text="Test" PostBackUrl="~/Default.aspx" runat="server"></asp:LinkButton>
    <br />
    <asp:Button ID="btn" runat="server" Text="Test" OnClientClick="return setLinkButton()" />
    </div>
    </form>
</body>
</html>
0
robastaCommented:
The code you posted works as expected. I ran it as-is in Firefox.
Changes the linkbutton to point to expertsexchange, with target being _about.
0
maheshsnkrCommented:
hi rgturner,

Try the below code snippet...

function setLinkButton() {
    var lnkbtn = document.getElementById('lbtnAnotherPage');
    lnkbtn.innerHTML="Display Text";
    lnkbtn.target="_blank";
    lnkbtn.href="http://yourURL.com";
    return false;
    }
0
Ray TurnerSenior ConsultantAuthor Commented:
Here is the entrie snippet of code.  I am still getting an error where lnkbtn = null
    <script language="javascript" type="text/javascript">
        function setLinkButton() {
            var lnkbtn = document.getElementById('lbtnAnotherPage');
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            return false;
        }
    </script>

<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton()">LinkButton</asp:LinkButton>

Open in new window

0
robastaCommented:
var myLink = document.getElementById('<%=lbtnAnotherPage.ClientID%>');
0
Ray TurnerSenior ConsultantAuthor Commented:
That works.  I can now access the object.  How can I do the following?

1. On mouse Over turn on the underline.
2. On mouse out turn off the underline.
3. Modify the setLinkButton function to accept two parameters (the object ID, the action (i.e. 'on' or 'off')
0
robastaCommented:
1.ONMouseOver:
myLink.setAttribute('text-decoration', 'underline');

2.OnMouseOut:
myLink.setAttribute('text-decoration', 'none');
0
robastaCommented:
function setLinkButton(btnState) {
            if (btnState =='on')
               myLink.setAttribute('text-decoration', 'underline');
            var lnkbtn = document.getElementById('lbtnAnotherPage');
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            if (btnState =='on')
               myLink.setAttribute('text-decoration', 'underline');
            else
               myLink.setAttribute('text-decoration', 'none');              


            return false;
        }
0
robastaCommented:
Made a mistake in the previous post:

 function setLinkButton(btnState) {          
            var lnkbtn = document.getElementById('lbtnAnotherPage');
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            if (btnState =='on')
               myLink.setAttribute('text-decoration', 'underline');
            else
               myLink.setAttribute('text-decoration', 'none');              


            return false;
        }


<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton('on')" onmouseout="setLinkButton('off')">LinkButton</asp:LinkButton>
      
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
infochandruCommented:
Hope this will helps you,

        <script language="javascript" type="text/javascript">
        function setLinkButton(lnkbtn,val) {
           
            lnkbtn.innerHTML = "Display Text";
            lnkbtn.target = "_blank";
            lnkbtn.href = "http://yourURL.com";
            if(val == "on")
                lnkbtn.setAttribute('text-decoration', 'underline');
            else
                lnkbtn.setAttribute('text-decoration', 'none');
            return false;
        }
    </script>

<asp:LinkButton ID="lbtnAnotherPage" runat="server" PostBackUrl="~/PhotoAlbum.aspx" onmouseover="setLinkButton(this,'on')" onmouseout="setLinkButton(this,'off')">LinkButton</asp:LinkButton>
0
Ray TurnerSenior ConsultantAuthor Commented:
Thanks!!!
0
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
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.