Question

I have an Asp.Net button and a span tag which I have image for that.
Now when I click the span element(i.e. the image) I should be able to click my button automatically and get an alert.

I Can do it with a function as shown below on button click event but I’m not aware how to do when I click element.

CSS:

#container a span 
{
display:none; 
background-image:url(images/alert.png); 
background-repeat:no-repeat; 
width:16px; 
height:16px; 
position:absolute;
right:0px; 
top:0px;
} 

#container a:hover span 
{
display:block;
}

This is my span within <a>:

    <div class='container a'><a href='#'>
    <img src='uploads/" + document.getElementById("currentDirectory").value + "/" 
    + file.name + "' width='64' height='64'/>
    <span onclick='document.getElementById('<%=btnAlert.ClientID%>').click();'>
    </span>
    </a>
    </div>";

This is my simple Asp.Net Button:

<asp:Button ID="btnAlert" runat="server" Text="Button" />

This is the code if I use a Javascript function:

  Protected Sub btnAlert_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAlert.Click
     System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, GetType(Page), "Script", "Somefunction();", True)
End Sub

Answer 1

Works fine for me.
You have no inner content in your span so maybe that’s why it’s not able to trigger the onclick because it’s not taking up any space in your dom. So when you think you’re clicking on it you’re actually not hitting it since it’s not taking up any space.

Try adding some content in the span like my example.
If that isn’t working double check to make sure your id is correct for the button.

<input type="button" id="mybutton" onclick="alert('hello')">
<span onclick="document.getElementById('mybutton').click()">My Span</span>

jsFiddle