在 Javascript 中访问函数中的变量答案

【问题标题】：Access a Variable within a function in Javascript在 Javascript 中访问函数中的变量
【发布时间】：2019-05-13 06:55:19
【问题描述】：

我想检查 woodCount 变量是否等于或大于 25 我想在页面上显示一个新按钮。现在我只是让它 console.log 真或假。

对不起，如果这真的很容易或没有意义，但我是 Javascript 新手。谢谢！

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>

【问题讨论】：

if woodCount >= 25 { 是无效语法，if 条件需要用括号括起来

标签： javascript html css

【解决方案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>

【讨论】：

哇太棒了，谢谢你的帮助！
如果你觉得这个答案有帮助，你能接受吗？