0
<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!

Siva Teja
  • 3
  • 4

3 Answers3

1

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()">
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • 1
    `click is a reserved word in javascript` - that doesn't sound right, never seen that in a list of reserved words - that link shows that the click method on an element does things, that doesn't show it's a reserved word – Jaromanda X Jun 10 '17 at 15:24
  • @JaromandaX you're probably right, I just mean it's reserved already as a native function. updated my wording. – Michael Coker Jun 10 '17 at 15:25
  • Because it's not a reserved word, it's already defined on buttons. – PeterMader Jun 10 '17 at 15:25
  • I would also like to suggest removing the semicolon's from the end of the `img` attributes. – NewToJS Jun 10 '17 at 15:25
  • @NewToJS thanks, didn't even look at all the syntax errors in that tag! updated – Michael Coker Jun 10 '17 at 15:26
  • @PeterMader - `it's already defined on buttons` - but there are no buttons – Jaromanda X Jun 10 '17 at 15:28
  • @MichaelCoker Very welcome. It appears most people aren't paying much attention to the image tag. Every answer posted so far has failed to remove them :p – NewToJS Jun 10 '17 at 15:28
  • @NewToJS hah yeah, probably because it's not really relevant to the question and it works with those errors (in the browsers I tested anyways) – Michael Coker Jun 10 '17 at 15:29
  • @JaromandaX You're right. I meant [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click). – PeterMader Jun 10 '17 at 15:30
0

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();">
Johannes
  • 64,305
  • 18
  • 73
  • 130
0

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()">
Yog
  • 88
  • 7