如何在div点击时调用函数，以及正确使用开关？

时间：2018-10-18 08:29:40

标签： javascript html css switch-statement

我正在尝试制作一个游戏，将用户带到新的“地板”，当用户单击按钮/ div（将来清除地板）时，新的div“点亮”（变黑）但我似乎无法使其正常工作。因此，想法是单击div，它将调用该函数，该函数会将变量级别提高1，并且当开关运行时，它将点亮（将divs变黑）许多id为“ floor1-”的div。 9“ 

var level = 1

function floor() {
  level += 1;
}
switch (floor) {
  case 1:
    if (level >= 1) {
      document.getElementById("floor1").style.color = "black";
    } else {
      document.getElementById("floor1").style.color = "white";
    }
    break;
  case 2:
    if (level >= 2) {
      document.getElementById("floor2").style.color = "black";
    } else {
      document.getElementById("floor2").style.color = "white";
    }
    break;
  case 3:
    if (level >= 3) {
      document.getElementById("floor3").style.color = "black";
    } else {
      document.getElementById("floor3").style.color = "white";
    }
    break;
  case 4:
    if (level >= 4) {
      document.getElementById("floor4").style.color = "black";
    } else {
      document.getElementById("floor4").style.color = "white";
    }
    break;
  case 5:
    if (level >= 5) {
      document.getElementById("floor5").style.color = "black";
    } else {
      document.getElementById("floor5").style.color = "white";
    }
  case 6:
    if (level >= 6) {
      document.getElementById("floor6").style.color = "black";
    } else {
      document.getElementById("floor6").style.color = "white";
    }
    break;
  case 7:
    if (level >= 7) {
      document.getElementById("floor7").style.color = "black";
    } else {
      document.getElementById("floor7").style.color = "white";
    }
    break;
  case 8:
    if (level >= 8) {
      document.getElementById("floor8").style.color = "black";
    } else {
      document.getElementById("floor8").style.color = "white";
    }
    break;
  case 9:
    if (level >= 9) {
      document.getElementById("floor9").style.color = "black";
    } else {
      document.getElementById("floor9").style.color = "white";
    }
    break;
  default:

}
html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}
<body>
  <div class="quizdiv">
    <div onclick="floor()" class="button"></div>
  </div>
  <div class="level">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="floor" id="floor5"></div>
    <div class="floor" id="floor6"></div>
    <div class="floor" id="floor7"></div>
    <div class="floor" id="floot8"></div>
    <div class="floor" id="floor9"></div>
  </div>
</body>

4 个答案:

答案 0 :(得分：0)

我稍微修改了代码。

  1. 将switch移动到了floor()函数中

  2. 将color更改为backgroundColor。

  3. 删除了所有else，我认为没有必要

  4. 将floot8更改为floor8

  5. 将level = 1更改为level = 0，以便该功能输入case 1

不确定这是否是您想要的，但是这使所有div都亮到了最后一层。由于我采用的是您的原始格式，因此我无需费心优化代码

var level = 0;

function floor() {
  level += 1;
  switch (level) {
    case 1:
      if (level >= 1) {
        document.getElementById("floor1").style.backgroundColor = "black";
      }
      break;
    case 2:
      if (level >= 2) {
        document.getElementById("floor2").style.backgroundColor = "black";
      }
      break;
    case 3:
      if (level >= 3) {
        document.getElementById("floor3").style.backgroundColor = "black";
      }
      break;
    case 4:
      if (level >= 4) {
        document.getElementById("floor4").style.backgroundColor = "black";
      }
      break;
    case 5:
      if (level >= 5) {
        document.getElementById("floor5").style.backgroundColor = "black";
      }
    case 6:
      if (level >= 6) {
        document.getElementById("floor6").style.backgroundColor = "black";
      }
      break;
    case 7:
      if (level >= 7) {
        document.getElementById("floor7").style.backgroundColor = "black";
      }
      break;
    case 8:
      if (level >= 8) {
        document.getElementById("floor8").style.backgroundColor = "black";
      }
      break;
    case 9:
      if (level >= 9) {
        document.getElementById("floor9").style.backgroundColor = "black";
      }
      break;
    default:

  }
}
html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}
<body>
  <div class="quizdiv">
    <div onclick="floor()" class="button"></div>
  </div>
  <div class="level">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="floor" id="floor5"></div>
    <div class="floor" id="floor6"></div>
    <div class="floor" id="floor7"></div>
    <div class="floor" id="floor8"></div>
    <div class="floor" id="floor9"></div>
  </div>
</body>

答案 1 :(得分：0)

我在这里看到两件事，首先是switch语句应该在“ floor”函数内，其次，可以像下面这样优化代码，显然可以将“ 9”更改为想要的任何值- > 

function floor() {
  level += 1;
  for(let index = 1; index <= 9; index++)
     document.getElementById("floor" + index).style.color = index <= level ? "black": "white"
}

答案 2 :(得分：0)

不需要大量的case语句，只需执行以下操作

var floorDivs = document.getElementsByClassName("floor");
var level = floorDivs.length;

function floor() {

  //reset levels
  if (level === -1)
    level = floorDivs.length;

  if (floorDivs[level])
    floorDivs[level].style.backgroundColor = "white";


  if (floorDivs[--level])
    floorDivs[level].style.backgroundColor = "black";


}
html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}
<body>
  <div class="quizdiv">
    <div onclick="floor()" class="button"></div>
  </div>
  <div class="level">
    <div class="floor" id="floor1"></div>
    <div class="floor" id="floor2"></div>
    <div class="floor" id="floor3"></div>
    <div class="floor" id="floor4"></div>
    <div class="floor" id="floor5"></div>
    <div class="floor" id="floor6"></div>
    <div class="floor" id="floor7"></div>
    <div class="floor" id="floot8"></div>
    <div class="floor" id="floor9"></div>
  </div>
</body>

答案 3 :(得分：0)

您可能不需要开关盒。将level的值附加到floor并获得元素

var level = 1

function floor() {
  if (document.getElementById('floor' + level) !== null) {
    document.getElementById('floor' + level).style.background = "black"

  }
  level += 1;
}
html,
body {
  margin: 0px;
  padding: 0px;
}

.quizdiv {
  height: 200px;
  width: 300px;
  border: 5px solid black;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.button {
  height: 100px;
  width: 100px;
  border: 5px solid black;
  border-radius: 50%;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.button:active {
  width: 95px;
  height: 95px;
}

.level {
  height: relative;
  width: 50px;
  float: right;
  border: 3px solid black;
}

.floor {
  height: 20px;
  border: 1px solid black;
}
<div class="quizdiv">
  <div onclick="floor()" class="button"></div>
</div>
<div class="level">
  <div class="floor" id="floor1"></div>
  <div class="floor" id="floor2"></div>
  <div class="floor" id="floor3"></div>
  <div class="floor" id="floor4"></div>
  <div class="floor" id="floor5"></div>
  <div class="floor" id="floor6"></div>
  <div class="floor" id="floor7"></div>
  <div class="floor" id="floor8"></div>
  <div class="floor" id="floor9"></div>
</div>

相关问题
最新问题