如何隐藏我的标签,直到满足条件

时间:2019-06-09 03:37:35

标签: javascript html

我基本上完成了一个Clicker游戏,但我想隐藏我的标签,直到重生等于一定数量为止。

我尝试使用与隐藏按钮相同的格式,但是我的标签页上确实没有ID。

2页的html代码:

    <html>

   <head>
        <title> Basic Clicker</title>
        <link rel="stylesheet" href="css/style.css" />
    </head>

<body>
    <div class="nav_bar">
        <ul>
          <li><a href="GameMainWindow.html" id="onlink">Home</a></li>
        <li><a href="SkillTree.html">SkillTree</a></li>
        <li><a href="Equipment.html">Equipment</a></li>
        <li><a href="Pets.html">Pets</a></li>
        <li><a href="Skills.html">Skills</a></li>
        <li><a href="Quests.html">Quests</a></li>
    </ul>
</div>
<div class="main_container">
    <p>
        <html>

        <head>
            <link rel="stylesheet" type="text/css" href="interface.css" />
        </head>
        <title> Basic Clicker</title>

第二页:

<!Doctype html>
<html>

<head>
   <title> Basic Clicker</title>
      <link rel="stylesheet" href="css/style.css" />
    </head>

   <body>
    <div class="nav_bar">
        <ul>
              <li><a href="GameMainWindow.html">Home</a></li>
               <li><a href="SkillTree.html">SkillTree</a></li>
              <li><a href="Equipment.html">Equipment</a></li>
              <li><a href="Pets.html">Pets</a></li>
              <li><a href="Skills.html" id="onlink">Skills</a></li>
               <li><a href="Quests.html">Quests</a></li>
       </ul>
   </div>
   <div class="main_container">
    <p>
        <html>

        <head>
            <title>HTML div</title>
        </head>

        <body>
            <div style="width: 300px;float:left; border: 15px solid green; height:300px; background:white; margin:10px" class="col-sm-5">
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Inventory
                <br />
                <span id="BronzeOre">
                    Bronze: <span id="Bronze">0</span>
                    <br />
                </span>

                <span id="SilverOre">
                    Silver: <span id="Silver">0</span>
                    <br />
                </span>

                <span id="GoldOre">
                    Gold: <span id="Gold">0</span>
                    <br />
                </span>

                <span id="DiamondOre">
                    Diamond: <span id="Diamond">0</span>
                    <br />
                </span>

我用来隐藏按钮/行的javascript示例:

var SilverOre = document.getElementById('SilverOre');
var GoldOre = document.getElementById('GoldOre');
var DiamondOre = document.getElementById('DiamondOre');



 function checkUnlockOre() {
      if (Mininglv >= 10) {
            SilverOre.style.visibility = 'visible'
        } else {
           SilverOre.style.visibility = 'hidden'
      }
    if (Mininglv >= 20) {
        GoldOre.style.visibility = 'visible'
   } else {
       GoldOre.style.visibility = 'hidden'
   }
    if (Mininglv >= 30) {
        DiamondOre.style.visibility = 'visible'
    } else {
        DiamondOre.style.visibility = 'hidden'
    }

我希望第二页保持隐藏状态(其余页面),直到满足条件为止。但是此刻我的页面没有被隐藏,导致播放器一开始就被解锁。

1 个答案:

答案 0 :(得分:0)

您共享的HTML中缺少在JS中获取的元素,请共享完整的html以更好地理解它。 例如,我在HTML中看不到document.getElementById('SilverOre')。