Get .aspx control ID in .js file

Hello everyone,

Contents hide

(HEAD PART)

<script type="text/javascript">

function ChangeColor1(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url'images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img1.JPG')";
}

function ChangeColor2(elementid) 
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img2.JPG')";
}

function ChangeColor3(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img4.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img3.JPG')";
}
function ChangeColor4(elementid)
{
document.getElementById(elementid).style.backgroundImage = "url('images/1.jpg')";
document.getElementById("<%= img2.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img3.ClientID%>").style.backgroundImage = "url('images/2.jpg')";
document.getElementById("<%= img1.ClientID%>").style.backgroundImage =  "url('images/2.jpg')";
document.getElementById("<%= imgchange.ClientID%>").style.backgroundImage = "url('images/img4.JPG')";
}
</script>

(BODY PART)

<table>
<tr>
<td id="img1" runat="server" onmouseover="ChangeColor1(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>  
<tr>
<td id="img2" runat="server" onmouseover="ChangeColor2(this.id)" 
    style="background image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img3" runat="server" onmouseover="ChangeColor3(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>
<tr>
<td id="img4" runat="server" onmouseover="ChangeColor4(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>
</tr>
</table>

This code is working fine in .ASPX page.

But when I put this script code in .js file and call it in head part of .ASPX page, this .js file is not working well.

ID=img2, ID=img3, ID=img4 of td is not passing in .js file.

How can I pass this all ID in .js file???

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

On aspx page write

<script>
var img1 = '<%= img1.ClientID%>';
var img2= '<%= img2.ClientID%>';
var img3= '<%= img3.ClientID%>';
var img4= '<%= img4.ClientID%>';
var imgchange= '<%= imgchange.ClientID%>';
</script>

in .js file do

function ChangeColor1(elementid) {
document.getElementById(img1).style.backgroundImage = "url('images/1.jpg')";
document.getElementById(img2).style.backgroundImage = "url('images/2.jpg')";
document.getElementById(img3).style.backgroundImage = "url('images/2.jpg')";
document.getElementById(img4).style.backgroundImage = "url('images/2.jpg')";
}

try this it will help you

Method 2

The problem is that ASP.NET will not process your JS file and fill out the placeholders.

One solution is to force the ID to remain static, for example:

<td id="img4" runat="server" clientidmode="static" onmouseover="ChangeColor4(this.id)" 
    style="background-image: url('images/2.jpg')">
</td>

The clientidmode="static" attribute tells ASP.NET not to mangle the ID. Then you don’t even need to use the <%= img1.ClientID%> at all.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating