Custom popup with .onclick is not working

Question

So I am working on creating a custom alert box. I've got most of the code the way I want it.

What I Want:

What I would like is to click the minus to fade the alert box so you can view the html behind it.

What is Wrong:

My issue is the min.onclick code does not click (clicking the minus sign does nothing).

See Below:

var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '&minus;';
var s = true;
min.onclick = function() {
    console.log('pressed!');
    if(s) {
        box.style.opacity = '.25';
        s = false;
    }
    else{
        box.style.opacity = '1';
        s = true;
    }
};
box.appendChild(min);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++) (function(i){
    var btn = document.createElement('button');
    btn.setAttribute('class','alert-button');
    btn.setAttribute('id',images[i]+'btn');
    btn.onclick = function () {
        console.log('You clicked: ', images[i]);
    };
    box.appendChild(btn);
    var img = document.createElement('img');
    img.setAttribute('id',images[i]+'img');
    img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
    img.setAttribute('class','alert-image');
    btn.appendChild(img);
})(i);

.alert {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.alert-content {
    background-color: #daac27;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
.alert-min {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>

Answer 1

To be honest I have no idea why your script does not work. I did nothing but appending the close "button" after that loop. Now the click handler is working.

edit:

i also edited the other console.log due to it printed undefined

var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++)  {
    var btn = document.createElement('button');
    btn.setAttribute('class','alert-button');
    btn.setAttribute('id',images[i]+'btn');
    let tmp = images[i]
    btn.onclick = function () {
        console.log('You clicked: ', tmp);
    };
    box.appendChild(btn);
    var img = document.createElement('img');
    img.setAttribute('id',images[i]+'img');
    img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
    img.setAttribute('class','alert-image');
    btn.appendChild(img);
}
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '&minus;';
var s = true;
min.onclick = function() {
    console.log('pressed!');
    if(s) {
        box.style.opacity = '.25';
        s = false;
    }
    else{
        box.style.opacity = '1';
        s = true;
    }
};
box.appendChild(min);

.alert {
    display: block;
    position: fixed;
    z-index: 1;
    padding-top: 10px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.alert-content {
    background-color: #daac27;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
.alert-min {
    color: #fff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>