javascript not working, onclick function

Question

I have an HTML page with a heading and 2 Divs, I then have a javascript where I want the heading to change if the user selects one off the Divs.

https://jsfiddle.net/L27xqgfs/1/

var happyMood = getElementById("happy");
var sadMood = getElementById("sad");


happyMood.onclick = function () {
    var mainHeading = getElementById("heading");
    mainHeading.innerHTML = "You have selected ";

};

sadMood.onclick = function () {
    var mainHeading = getElementById("heading");
    mainHeading.innerHTML = "You have selected " + sadMood;
};

Please can someone advise where I've gone wrong?

Thanks in advance.

getElementById() is not a global function, try document.getElementById(). Start there. — CollinD
– CollinD, Commented Sep 27, 2015 at 8:27
Also after you make the change suggested in other comments, if you try to concatenate sadMood object with a string you won't get the result you would expect. Instead use its ID to get requested result. — Birkan Cilingir
– Birkan Cilingir, Commented Sep 27, 2015 at 8:33

ssj · Accepted Answer · 2015-09-27 08:42:45Z

2

if you call getElementById without any object,then you call window. getElementById, but you really should call document.getElementById. And you should import js file into html(in you local test). I have created another jsfiddle which is correct.

edited Sep 27, 2015 at 8:42

answered Sep 27, 2015 at 8:28

ssj

1,8172 gold badges17 silver badges28 bronze badges

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

Comments

kannan · Accepted Answer · 2015-09-27 08:29:09Z

0

var happyMood = document.getElementById("happy");
var sadMood = document.getElementById("sad");


happyMood.onclick = function () {
   var mainHeading =     document.getElementById("heading");
    mainHeading.innerHTML = "You have selected ";

};

sadMood.onclick = function () {
var mainHeading =    document.getElementById("heading");
    mainHeading.innerHTML = "You have selected " +   sadMood;
};

answered Sep 27, 2015 at 8:29

kannan

7116 silver badges18 bronze badges

Collectives™ on Stack Overflow

javascript not working, onclick function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related