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");
}

如果有帮助，https://jsfiddle.net/mnc8m3tr/2/

，这里是jsfiddle的链接

我正在使用的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>

如何在<div>中获取两个元素来调用不同的函数？

2 个答案: