Reputation: 57
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.
Upvotes: 0
Views: 84
Reputation: 1797
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.
Upvotes: 2
Reputation: 711
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;
};
Upvotes: 0