Event Binding collides with Loading

by David Gonzalez

HTML

<div>
            <button id = "buttonAdder">
                Add Button
            </button>
            <label id ="responsesContainer"></label>
            <div id ="buttonContainer">
            
            </div>
        </div>

CSS

h1 { font-weight: bold; }

.blue-text{
    color: blue;
    font-weight: bold;
}

.red-text{
    color: red;
}

.white-background{
    background-color: white;
}

JavaScript

let responses = "";

let buttonCounter= 0;
function simulateSourceLoad(id){
    	responses = responses + ", " +id;
      $("#responsesContainer").text(responses);
      click();
}

function simulateSourceLoadRandom(id){
		setTimeout(function(){
    	responses = responses + ", " +id;
      $("#responsesContainer").text(responses);
    }, Math.round(Math.random()*1000));
}

function click(event){
   let $button =  $(`<button id  = "${++buttonCounter}"><img src="${imageUrls[buttonCounter%2]}" onload="simulateSourceLoad('${buttonCounter}')"></img></button>`);
    $("#buttonContainer").
    append($button);
    $button.addClass("blue-text");
}
let imageUrls = [
"https://cdn3.vox-cdn.com/thumbor/SsodEdF1_fGHDSfc3_z8cgHfWbM=/cdn0.vox-cdn.com/uploads/chorus_asset/file/6032327/N3DS_MarioLuigiPaperJam_char_01_png_jpgcopy.0.jpg",
"http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico"
];
window.onload=function(){
let $buttonAdder = $("#buttonAdder");

$buttonAdder.click(click);
}