CODEWITHSUNDEEP
javascripthtmlcss
Siva Teja
Siva Teja

Reputation: 3

"onclick" event is not triggering on image to change it

<script>
    function click()
    {
        var username = prompt("Enter ur name:");
        if(username)
        {
            alert("Hi,"+username);
            document.getElementById("rockPic").src = "rocksmile.jpg";
        }
    }

</script>


    <img id = "rockPic" 
    align = "center"; 
    src = "rock.jpg";
    alt = "irock"; 
    height = 200px; 
    width = 200px;
    style = "cursor:pointer";
    onclick = "click();">

</body>

In this code while clicking on the image then 'prompt' box must be displayed. But it is doing nothing. please help!

Upvotes: 0

Views: 428

Answers (3)

Michael Coker
Michael Coker

Reputation: 53664

click is a native javascript function already. It simulates a mouse click. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

Use a different name for your function.

PS - your tag has a bunch of syntax errors. Remove the ;'s and height and width doesn't need units, just numbers, and align is obsolete on an img in html5.

<script>
  function myFunc() {
    var username = prompt("Enter ur name:");
    if (username) {
      alert("Hi," + username);
      document.getElementById("rockPic").src = "rocksmile.jpg";
    }
  }
</script>

<img id="rockPic" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="irock" height="200" width="200" style="cursor:pointer" onclick="myFunc()">

Upvotes: 1

Yog
Yog

Reputation: 88

Per documentation, the string values of "onClick" handler attributes are interpreted as the bodies of handler functions. Now since, there is already a function called 'click' for calling the event handler, declaring another function with the same name will basically override the native click.

 function clickAction()
  {
        var username = prompt("Enter ur name:");
        if(username)
        {
            alert("Hi,"+username);
            document.getElementById("rockPic").src = "rocksmile.jpg";
        }
    }
   <img id = "rockPic" 
    align = "center" 
    src = "rock.jpg"
    alt = "irock" 
    height = 200px
    width = 200px
    style = "cursor:pointer"
    onclick = "clickAction()">

Upvotes: 0

Johannes
Johannes

Reputation: 67738

Using a different function name and an image that is actually accessible, it works here:

function my_function()
    {
        var username = prompt("Enter ur name:");
        if(username)
        {
            alert("Hi,"+username);
            document.getElementById("rockPic").src = "http://placehold.it/200x200/d95";
        }
    }
<img id = "rockPic" 
    align = "center"
    src = "rock.jpg"
    alt = "irock"
    height = "200px" 
    width = "200px"
    style = "cursor:pointer;"
    onclick = "my_function();">

Upvotes: 0

Related Questions