如何让两个元素在一个调用<div>不同的函数？

Question

我是javascript/html/css的新手，如果这看起来是一个简单的问题，请原谅，但我正在页面上构建一个覆盖层，并且有两个元素具有onclick函数。

<div id="calibration" class="overlay">
<a href="#" class="closeBtn" onclick="closeCalibration()">&times;</a>
<a href="#" class="calDot" onclick="moveCalibrationDot()">&bull;</a>
<div class="overlay__content">
<a href="#">Please look at the red dots and click on them as they appear.</a>
</div>
</div>

然而，这两个元素似乎都调用相同的函数，而不是它们应该调用的两个不同的函数

document.getElementById('calibration').style.height = "100%";

function closeCalibration() {
document.getElementById('calibration').style.height = "0%";
}
function moveCalibrationDot() {
console.log("Hello");
}

如果有帮助的话，这里有一个指向jsfiddle的链接，https://jsfiddle.net/mnc8m3tr/2/

我使用的css是

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: rgba(1, 1, 1, .9);
overflow-x: hidden;
transition: all 0.5s;
z-index: 1;
}
.overlay__content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 10px;
color: #fff;
font-size: 30px;
text-decoration: none;
display: block;
}
.overlay .closeBtn {
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
.overlay .calDot {
position: relative;
top: 5%;
left: 5%;
color: #f00;
font-size: 50px;
}

Answer 1

打开jsfiddle，然后在chrome中打开DevTools(按F12)。然后检查你们的按钮，你们会发现你们的一个链接很宽，覆盖了关闭按钮。

Answer 2

点出现在"x"链接上是因为它的位置，所以无论何时单击"x"都会单击该点。将点设为position: absolute;，它将不会与其他按钮重叠。

.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0%;
background: rgba(1, 1, 1, .9);
overflow-x: hidden;
transition: all 0.5s;
z-index: 1;
}
.overlay__content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 10px;
color: #fff;
font-size: 30px;
text-decoration: none;
display: block;
}
.overlay .closeBtn {
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
.overlay .calDot {
position: absolute;
top: 5%;
left: 5%;
color: #f00;
font-size: 50px;
}

<div id="calibration" class="overlay">
<a href="#" class="closeBtn" onclick="closeCalibration()">&times;</a>
<a href="#" class="calDot" onclick="moveCalibrationDot()">&bull;</a>
<div class="overlay__content">
<a href="#">Please look at the red dots and click on them as they appear.</a>
</div>
</div>
<script>
document.getElementById('calibration').style.height = "100%";
function closeCalibration() {
document.getElementById('calibration').style.height = "0%";
}
function moveCalibrationDot() {
console.log("Hello");
}
</script>