attempting to return a Clickable image in javascript but onclick causes page refresh

Question

I'm using JS to return a HTML clickable image in my web application.

The problem I'm running into is that when I click on the button, the image button automatically causes the page to refresh. What I'd like to do is ensure that when the button is clicked, no refresh takes place, I stay on the page and nothing changes:

 function BuildClickableImage()
 {
    var image = "";
        image  += "<a href='' ";
        image  += "  onclick =\"Method1();  \">";  //Currently no implementation for this method, its empty
        image  += "    <img src='@Url.Content("~/Pics/Pic1.png")' />";
        image  += "</a>";

   return image;
 }

Anyway to prevent refresh of the page when this is clicked?

score 1 · Answer 1 · answered Jul 20 '21 at 16:27

Make a HTML link that does nothing (literally nothing)

function BuildClickableImage()
 {
    var image = "";
        image  += "<a href='#;' ";
        image  += "  onclick =\"Method1();  \">";  //Currently no implementation for this method, its empty
        image  += "    <img src='@Url.Content("~/Pics/Pic1.png")' />";
        image  += "</a>";

   return image;
 }

Or am I misunderstanding the problem?

score 1 · Accepted Answer · answered Jul 20 '21 at 16:28

As of HTML5 you can simply omit the href attribute of the anchor:

function BuildClickableImage()
 {
    var image = "";
        image  += "<a ";
        image  += "  onclick =\"Method1();  \">";  //Currently no implementation for this method, its empty
        image  += "    <img src='@Url.Content("~/Pics/Pic1.png")' />";
        image  += "</a>";

   return image;
 }

attempting to return a Clickable image in javascript but onclick causes page refresh

2 Answers2