javascript不起作用，onclick功能

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.

Answer 1

if you call getElementById without any object,then you call window. getElementById 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.

Answer 2

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;
};