Does this function have to be nested?
window.onload = function () {



Mixing DOM-0 event handlers and addEventListener is inconsistent, pick one and stick with it.

window.addEventListener("load", function () {





function bgnAddChllng() {



Don't disemvowel your variables. This isn't Wheel of Fortune, vowels don't cost anything. 

function beginAdditionChallenge() {





var addChllng = document.getElementById("addChllng");



Use proper indentation. JSFiddle has a handy TidyUp button to do it for you. Consider a more descriptive ID for the button.

var button = document.getElementById("challengeButton");





addChllng.addEventListener('click', bgnAddChllng, false);



Switching between single and double quotes is inconsistent, pick one and stick with it. useCapture defaults to false, there's no need to explicitly pass it. 

button.addEventListener("click", beginAdditionChallenge);





  nesting the actual useful code in an anonymous function seems bloated/hacky to me.


It's a pretty common practice, but if you don't like it, give the function a name and don't nest it, just as you did with the button click event handler.

function beginAdditionChallenge() {
    alert("This is a test alert.");
}

function initChallenge() {
    var button = document.getElementById("challengeButton");
    button.addEventListener("click", beginAdditionChallenge);   
}

window.addEventListener("load", initChallenge);