onClick event not getting called in JavaScript

Question

I am writing my first code in JavaScript.

I want to do this :-

Load an image
Ask for user name
after writing the name change the image
and show user's name in alert

My code goes like this:

<!DOCTYPE html>
<html>
<head>
<title>iRock - First Project</title>
<script type = "text/javascript">

function touchRock(){

    var userName = prompt ("what is your name?","Enter your name here.");

    if(userName){
        alert("It is good to meet you, " "+userName+ " ".");
        document.getElementById("firstImg").src="1.jpg";
    }
}

</script>
</head>

<body onload = "alert('hello, I am your pet.');">
        <div style = "margin-top:100px; text-align:centre">
                 <img id="firstImg" src="http://www.smiley-faces.org/wallpaper/smiley-face-wallpaper-widescreen-001.jpg" alt="iRock" style="cursor:pointer" onclick="touchRock()" />
        </div>
    </body>
</html>

Can anyone please tell me what is wrong in this? The event is not getting called after touching the image.

First thing you should do is learn to use the Javascript console in your browser. It will point out when you have syntax errors in your code. — Barmar
– Barmar, Commented May 6, 2013 at 19:37
jsfiddle.net/DfSHS -- error in your alert statement, fiddle is the fix. — dchhetri
– dchhetri, Commented May 6, 2013 at 19:38
@user814628 If you're going to answer the question, post it in an answer, not a comment. — Barmar
– Barmar, Commented May 6, 2013 at 19:39

PSL · Accepted Answer · 2013-05-06 19:37:06Z

7

Your string concatination is wrong inside the function

alert("It is good to meet you, " "+userName+ " "."); you must be getting error in the console.

Check this

function touchRock(){

    var userName = prompt ("what is your name?","Enter your name here.");

    if(userName){
        alert("It is good to meet you, " + userName +  ".");
        document.getElementById("firstImg").src="1.jpg";
    }
}

if you are using Chrome. press F12 --> you will get developer tool bar enabled, in that there will be console where you can see any errors, debug javascript inspect elements etc.. SImilarly you have Firebug for FireFox and DevToolbar for Int Explorer.

Script Debugger in Chrome - Ref

answered May 6, 2013 at 19:37

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jean-Luc Godard Over a year ago

Thanks man , So fast , It worked like a charm . BTW , I can only accept answer after 11 Mins :(

PSL Over a year ago

For Chrome/mac SHortcut keys check this--> developers.google.com/chrome-developer-tools/docs/shortcuts

bennick · Accepted Answer · 2013-05-06 19:50:22Z

1

You are not preforming string concatenation correctly in your alert.

Change this:

alert("It is good to meet you, " "+userName+ " ".");

To this:

alert("It is good to meet you, " + userName + ".");

To concatenate two strings together the + operator must sit outside of the strings.

var newString = "I am " + "a concatenated string";

answered May 6, 2013 at 19:50

bennick

1,92515 silver badges22 bronze badges

Comments

John · Accepted Answer · 2013-05-10 08:56:24Z

1

i think u can use alert( "It is good to meet you, "+ userName + "." ) ;

instead of alert("It is good to meet you, " "+userName+ " ".");

As per my knowledge, in javascript we usually use "+" symbol for concatenation .

answered May 10, 2013 at 8:56

John

1451 silver badge9 bronze badges

Collectives™ on Stack Overflow

onClick event not getting called in JavaScript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related