Question

我想检查woodCount变量是否等于或大于25。我想在页面上显示一个新按钮。现在，我只是将console.log设置为true或false。

很抱歉，如果这真的很容易或没有意义，但是我是Java语言的新手。谢谢！

JAVASCRIPT文件

var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");



gatherWood.onclick = function(){
  woodCount++;
  wood.innerHTML = woodCount;
}


function fire() {
    if woodCount >= 25 {
       console.log('True');
  }else{
    console.log('False');
  }
}

HTML文件

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Game</title>
  <meta name="description" content="Game">
  <meta name="author" content="SitePoint">
  <script src="game.js"></script>
  <link rel="stylesheet" href="style.css">

</head>

<body>
    <div>
    <input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
   Wood = <span id="wood">0</span> 
    </div>

</body>
</html>

Answer 1

向DOM添加一个按钮并使其隐藏。当超过阈值时，将显示属性从隐藏切换为阻止。
确保我们在发生增量的onclick事件处理程序中调用发生样式切换的函数。

var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");

gatherWood.onclick = function() {
  woodCount++;
  wood.innerHTML = woodCount;
  fire();
};

function fire() {
  if (woodCount >= 25) {
    document.getElementById("higherThan25")
      .style.display = "block";
  } else {
    //console.log("False");
  }
}

.woodbtn {
  border-style: solid;
  border-color: white;
  color: white;
  padding: 10px 10px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  float: right;
  background-color: transparent;
}

.woodtxt {
  text-color: white;
}

body {
  background-color: black;
  color: white;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">

  <title>Game</title>
  <meta name="description" content="Game">
  <meta name="author" content="SitePoint">
  <script src="game.js"></script>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <div>
    <input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
    <input style="display: none;" class="woodbtn" type="button" value="Higher Than 25" id="higherThan25" />
    Wood = <span id="wood">0</span>
  </div>

</body>

</html>

使用Javascript

1 个答案: