使用.onclick的自定义弹出窗口无效

Question

所以我正在创建一个自定义警报框。我已经按照我想要的方式获得了大部分代码。

我想要的：

我想要的是点击减号以淡化警告框，以便您可以查看它背后的html。

错误：

我的问题是min.onclick代码未单击（单击减号不执行任何操作）。

见下文：

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

说实话，我不知道为什么你的脚本不起作用。我什么也没做，只是在那个循环之后附加了关闭的“按钮”。现在click处理程序正在运行。

修改

由于打印了console.log

，我还编辑了其他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>