I am wondering why doStuff() is called without clicking.
function pageReady() {
var buttonBox = document.getElementById("buttonBox");
buttonBox.onclick = doStuff();
function doStuff() {
buttonBox.style.background = "orange";
buttonBox.style.width = "600px";
buttonBox.innerHTML = "<h2>SURPRISE!!</h2>";
}
}
You're invoking the function, you should change
buttonBox.onclick = doStuff()
to
buttonBox.onclick = doStuff;
Now you're passing the function to the handler without invoking it.