0
\$\begingroup\$

So i think i have a good system for this but its only working on the first tab. its really confusing me i tried a bit of ways to fix this. https://jsfiddle.net/h3fo7rL9/10/ scuffed fiddle with my css and 3 different html files. not sure u can have 3 different html files on fiddle but i will post my code below

html code for 3 pages( to try and get it to be able to switch from first page to 2nd and still have the next page hidden)

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

<body>
  <div class="nav_bar">
    <ul>
        <li id="HomeTab"><a href="GameMainWindow.html" id="onlink">Home</a></li>
        <li id="SkillTreeTab"><a href="SkillTree.html">SkillTree</a></li>
        <li id="EquipmentTab"><a href="Equipment.html">Equipment</a></li>
        <li id="PetsTab"><a href="Pets.html">Pets</a></li>
        <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
        <li id="QuestsTab"><a href="Quests.html">Quests</a></li>
        <li id="ShopTab"><a href="Shop.html">Shop</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>

        <body>
            <style>
                div,
                a {
                    text-align: center;
                }

            </style>
            <span id="cookies">0</span>
            <br />
            <span id="rebirths">0</span>
            <br />
            <button onclick="cookieClick(); Strengthexp()">Click Me!</button>
            <br />
            Cost: 10mp <button id="BigClickBtn" onclick="Bigclick()">BigClick</button>
            <br />
            Cost: <span id="antCost">10</span> <button onclick="buyAnt()" id="antCostBtn" >Buy Ant</button> <span id="ants">0</span>
            <br />
            Cost: <span id="catCost">50</span> <button onclick="buyCat()" id="catCostBtn">Buy Cat</button> <span id="cats">0</span>
            <br />
            Cost: <span id="dogCost">100</span> <button onclick="buyDog()" id="dogCostBtn">Buy Dog</button> <span id="dogs">0</span>
            <br />
            Cost: <span id="humanCost">200</span> <button onclick="buyHuman()" id="humanCostBtn">Buy Human</button> <span id="humans">0</span>
            <br />
            Cost: <span id="rebirthCost">10</span> <button onclick="buyRebirth()" id="rebirthCostBtn">Rebirth</button>
            <br />
            Hp:<span id="HitPoints">0</span> Mp:<span id="ManaPoints">0</span> 
            <br />

            Skill Tree &nbsp; &nbsp; SP:<span id="SkillPoints">0</span>
            <br />
            <br />
            <!--<button id="HitPointsup" onclick="HitPointsup()">Hp up</button>--> &nbsp; <button id="ManaPointsup" onclick="ManaPointsup()">Mp up</button>
            <br />
            <!--<button id="Hpregen" onclick="Hp regen()">Hp regen</button>-->
            &nbsp;
            <button id="Strengthup" onclick="Strengthup()">Str up</button> &nbsp;
            <button id="Mpreg" onclick="ManaPointsregen()">Mp regen</button>
            <br />
            <button id="Passive1" onclick="()">Passive skill</button> &nbsp; <button id="Passive2" onclick="Hp up()">Passive skill</button> &nbsp; <button id="Passive3" onclick="Hp up()">Passive skill</button> &nbsp; <button id="Passiveskill" onclick="Hp up()">Passive skill</button> &nbsp;
            <br />

        </body>

            </body>
         </style>

            <br />
              Toggle AutoBigClick <input id="AutoBigClickYes"   type="radio" name="Auto"> <input id="AutoBigClickNo"   type="radio" name="Auto">
            <label class="radio">  
            <br />

                <script type="text/javascript" src="SkillTree.js"></script>
                <script type="text/javascript" src="Skills.js"></script>
                <script type="text/javascript" src="main.js"></script>
        </body>

<html>

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

<body>
    <div class="nav_bar">
        <ul>
            <li id="HomeTab"><a href="GameMainWindow.html">Home</a></li>
            <li id="SkillTreeTab"><a href="SkillTree.html" 
id="onlink">SkillTree</a></li>
           <li id="EquipmentTab"><a href="Equipment.html">Equipment</a></li>
           <li id="PetsTab"><a href="Pets.html">Pets</a></li>
           <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
           <li id="QuestsTab"><a href="Quests.html">Quests</a></li>
           <li id="ShopTab"><a href="Shop.html">Shop</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>

        <body>
            <style>
                div,
                a {
                    text-align: center;
                }

            </style>
            Skill Tree &nbsp; &nbsp; SP:<span id="SkillPoints">0</span>
            <br />
            <br />
            <!--<button id="HitPointsup" onclick="HitPointsup()">Hp up</button>--> &nbsp; <button id="ManaPointsup" onclick="ManaPointsup()">Mp up</button>
            <br />
            <!--<button id="Hpregen" onclick="Hp regen()">Hp regen</button>-->
            &nbsp;
            <button id="Strengthup" onclick="Strengthup()">Str up</button> &nbsp;
            <button id="Mpreg" onclick="ManaPointsregen()">Mp regen</button>
            <br />
            <button id="Passive1" onclick="()">Passive skill</button> &nbsp; <button id="Passive2" onclick="Hp up()">Passive skill</button> &nbsp; <button id="Passive3" onclick="Hp up()">Passive skill</button> &nbsp; <button id="Passiveskill" onclick="Hp up()">Passive skill</button> &nbsp;
            <br />

            <script type="text/javascript" src="main.js"></script>
            <script type="text/javascript" src="SkillTree.js"></script>
        </body>

        </html>

                </p>
</div>

</body></html>

<html>

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

<body>
    <div class="nav_bar">
        <ul>
            <li id="HomeTab"><a href="GameMainWindow.html" >Home</a></li>
            <li id="SkillTreeTab"><a href="SkillTree.html">SkillTree</a></li> 
            <li id="EquipmentTab"><a href="Equipment.html" 
id="onlink">Equipment</a></li>
           <li id="PetsTab"><a href="Pets.html">Pets</a></li>
           <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
          <li id="QuestsTab"><a href="Quests.html">Quests</a></li>
           <li id="ShopTab"><a href="Shop.html">Shop</a></li>
       </ul>
    </div>
    <div class="main_container">

        <div style="width: 500px; float:left; ">
        <p><font size="+2"> <b> Equipment </b></font>&nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <br />
        <br />
        Wood Sword<input id="woodsword"   type="radio" name="Sword"> 
        Silver Sword<input id="silversword"   type="radio" name="Sword">
        Gold Sword<input id="goldsword"   type="radio" name="Sword">
        Diamond Sword<input id="diamondsword"   type="radio" name="Sword">
            <label class="radio">
            <br>
        Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
        Silver Helm <input id="silverhelm"   type="radio" name="Helm">
        Gold Helm <input id="leatherhelm"   type="radio" name="Helm">
        Diamond Helm <input id="leatherhelm"   type="radio" name="Helm">
            <label class="radio">
            <br>
        Leather Boots <input id="leatherboots"   type="radio" name="Boots">
        Silver Boots <input id="silverboots"   type="radio" name="Boots">
        Gold Boots <input id="goldboots"   type="radio" name="Boots">
        Diamond Boots <input id="diamondboot"   type="radio" name="Boots">
            <label class="radio">
            <br>
        Leather Armor <input id="leatherarmor"   type="radio" name="Armor">
        Silver Armor <input id="silverarmor"   type="radio" name="Armor">
        Gold Armor <input id="goldarmor"   type="radio" name="Armor">
        Diamond Armor <input id="diamondarmor"   type="radio" name="Armor">
            <label class="radio">
            <br>

        <div style="width: 350px;   float:right;position: absolute; left: 650px; top: 115px; border: 15px solid green; height:300px; background:white; position: absolute; left: 600px; top: 115px; margin:10px">
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+2"> <b>Forge</b>
                <br />
                <font size="-2"> Silver Sword &nbsp;<button id="SilverSwordBtn" onclick="buySsword()">Craft</button> <font size="-2"> Gold Sword &nbsp;<button id="GoldSwordBtn" onclick="buyGsword()">Craft</button> <font size="-2"> Diamond Sword &nbsp;<button id="DiamondSwordBtn" onclick="buyDsword()">Craft</button>
                <br />
                <font size="-2"> Silver Helm &nbsp; &nbsp;<button id="SilverHelmBtn" onclick="buyShelm()">Craft</button> <font size="-2"> Gold Helm &nbsp;&nbsp;&nbsp;<button id="GoldHelmBtn" onclick="buyGhelm()">Craft</button> <font size="-2"> Diamond Helm &nbsp;&nbsp;<button id="DiamondHelmBtn" onclick="buyDhelm()">Craft</button>
                <br />
                <font size="-2"> Silver Boots &nbsp;&nbsp;<button id="SilverBootsBtn" onclick="buySboots()">Craft</button> <font size="-2"> Gold Boots &nbsp;&nbsp;<button id="GoldBootsBtn" onclick="buyGboots()">Craft</button> <font size="-2"> Diamond Boots &nbsp;<button id="DiamondBootsBtn" onclick="buyDboots()">Craft</button>
                <br />
                <font size="-2"> Silver Armor &nbsp;<button id="SilverArmorBtn" onclick="buySarmor()">Craft</button> <font size="-2"> Gold Armor &nbsp;&nbsp;<button id="GoldArmorBtn" onclick="buyGarmor()">Craft</button> <font size="-2"> Diamond Armor &nbsp;<button id="DiamondArmorBtn" onclick="buyDarmor()">Craft</button>
                <br />
                Strength+<span id="Strength">0</span>





            <script type="text/javascript" src="Pets.js"></script>
            <script type="text/javascript" src="main.js"></script>
            <script type="text/javascript" src="Equipment.js"></script>
            <p>
</div>

</body></html>

Css code:

body {
  margin: auto;
  background: #efefef;
  font-family: arial;
}

.nav_bar {
 margin: auto;
  border-bottom: 1px solid #000000;
  width: 860px;
  padding: 0 20px 0 20px;
  height: 64px;
  margin-top: 30px;
}

.nav_bar ul {
  padding: 0;
  list-style: none;
}

.nav_bar ul li {
  float: left;
 font-size: 16px;
  font-weight: bold;
  margin-right: 5px;
}

.nav_bar ul li a {
  text-decoration: none;
  color: #000000;
  background: #6db1e4;
  border: 1px solid #000000;
  border-bottom: none;
  padding: 23px 20px 22px 20px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  width: 75px;
  display: block;
  text-align: center;
}

.nav_bar ul li a:hover {
  text-decoration: none;
  color: #000000;
  background: #96e0e9;
  -moz-transition: background-color 200ms ease-in;
  -webkit-transition: background-color 200ms ease-in;
  -ms-transition: background-color 200ms ease-in;
  -o-transition: background-color 200ms ease-in;
  transition: background-color 200ms ease-in;
}

.nav_bar ul li a#onlink {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid #ffffff;
}

.nav_bar ul li a#onlink:hover {
  background: #ffffff;
  color: #000000;
}

.main_container {
  margin: auto;
  width: 860px;
  padding: 20px;
  border: 1px solid #000000;
  min-height: 400px;
  border-top: none;
  background: #ffffff;
 }

.main_container p {
  font-size: 14px;
  margin: 0;
  padding: 0;
}

javascript:

var rebirths = 0;
var HitPoints = 0;
 var ManaPoints = 0;
 var SkillPoints = 0;
 var NextRebirthCost = rebirthCost;

function buyRebirth() {
    var rebirthCost = Math.floor(10 * Math.pow(1.1, rebirths)); //works out 
the cost of this grandma
    if (cookies >= rebirthCost && rebirths < 1) { //checks that the player 
can afford the grandma
        rebirths = rebirths + 1; //increases number of grandmas
        cookies = 0;
        HitPoints = HitPoints + 10;
        ManaPoints = ManaPoints + 10;
        SkillPoints = SkillPoints + 1;
       NextRebirthCost = Math.floor(10 * Math.pow(1.1, rebirths));
       document.getElementById('rebirths').innerHTML = rebirths; //updates 
the number of grandmas for the user
       document.getElementById('cookies').innerHTML = cookies;
       document.getElementById("HitPoints").innerHTML = HitPoints;
       document.getElementById("ManaPoints").innerHTML = ManaPoints;
      document.getElementById("rebirthCost").innerHTML = NextRebirthCost;
      document.getElementById("SkillPoints").innerHTML = SkillPoints;
       checkTab()
  }; 
   if (cookies >= rebirthCost)
       if (rebirths >= 1) {
          cookies = 0;
          rebirths = rebirths + 1;
          SkillPoints = SkillPoints + 1;
            NextRebirthCost = Math.floor(10 * Math.pow(1.1, rebirths));
           document.getElementById('cookies').innerHTML = cookies;
          document.getElementById("rebirthCost").innerHTML = 
  NextRebirthCost;
          document.getElementById("rebirths").innerHTML = rebirths;
          document.getElementById("SkillPoints").innerHTML = SkillPoints;

          checkTab()
      }
};


var SkillTreeTab = document.getElementById("SkillTreeTab");
var EquipmentTab = document.getElementById("EquipmentTab");
var PetsTab = document.getElementById("PetsTab");
var SkillsTab = document.getElementById("SkillsTab");
var QuestsTab = document.getElementById("QuestsTab");
var ShopTab = document.getElementById("ShopTab");


   function checkTab() {
    if(rebirths >= 1){
     SkillTreeTab.style.visibility = 'visible'
   } else {
     SkillTreeTab.style.visibility = 'hidden'

    }
    if(rebirths >= 2){
    EquipmentTab.style.visibility = 'visible'
     } else {
     EquipmentTab.style.visibility = 'hidden'

     }
    if(rebirths >= 3){
         PetsTab.style.visibility = 'visible'
     } else {
     PetsTab.style.visibility = 'hidden'

      }
     if(rebirths >= 4){
    SkillsTab.style.visibility = 'visible'
    } else {
     SkillsTab.style.visibility = 'hidden'

   }
     if(rebirths >= 5){
     QuestsTab.style.visibility = 'visible'
     } else {
     QuestsTab.style.visibility = 'hidden'

    }
     if(rebirths >= 6){
    ShopTab.style.visibility = 'visible'
     } else {
     ShopTab.style.visibility = 'hidden'
     checkTab() 
     }
    }


     function checkCursor() {
        if (cookies <= 9) {
           document.getElementById("antCostBtn").disabled = true;
        } else {
        document.getElementById("antCostBtn").disabled = false;
    }

    if (cookies <= 49) {
        document.getElementById("catCostBtn").disabled = true;
    } else {
        document.getElementById("catCostBtn").disabled = false;
    }

    if (cookies <= 99) {
        document.getElementById("dogCostBtn").disabled = true;
    } else {
        document.getElementById("dogCostBtn").disabled = false;
    }

    if (cookies <= 199) {
        document.getElementById("humanCostBtn").disabled = true;
    } else {
        document.getElementById("humanCostBtn").disabled = false;
    }

    if (cookies <= 9) {
        document.getElementById("rebirthCostBtn").disabled = true;
    } else {
        document.getElementById("rebirthCostBtn").disabled = false;
    }

    if (rebirths < 1) {
        document.getElementById("BigClickBtn").disabled = true;
    } else {
        document.getElementById("BigClickBtn").disabled = false;
    }
}

checkCursor()
checkTab()

Sorry this is alot i wanted to show that i did have the main.js tied to all 3 of the htmls

I expect the outcome to if rebirths >=1 for skilltree tab to be unhidden then for just the home tab and skilltreetab to be interactable than if rebirths>=2 for the equipment tab to be unhidden and so on. but at the moment if i leave the home tab it reveals all the other tabs causing it to be not much of a unlock system.

\$\endgroup\$
  • \$\begingroup\$ So what do you want the code to do, to only show certain tabs when the user is a certain level, or when certain criteria in other tabs is meet \$\endgroup\$ – Kitanga Nday Jun 19 at 4:50
  • \$\begingroup\$ at default prntscr.com/o3ouuj after 1 rebirth prntscr.com/o3ov1b after 2 rebirths prntscr.com/o3ov51 and so on. But when i click one of those unlocked tabs prntscr.com/o3ovcy . the only tabs that should be displayed are the ones that meet the requirements. so home, skilltree, and equipment. others should not be unhidden until their conditions are met. this is only working for my home page so far. all others it reveals everything. \$\endgroup\$ – tmanrocks994 Jun 19 at 5:06
  • \$\begingroup\$ OK, now I need to know, what is a "rebirth"? \$\endgroup\$ – Kitanga Nday Jun 19 at 5:32
  • \$\begingroup\$ the rebirth counter goes up if the player gets enough points to buy it. it basically resets the game and sets your cookie counter to zero. so its like a game reset but u unlock another bonus. if u have played any clicker games most of them have this system. so i have it so u click a button until u have 100 points( alot of other stuff to buy) if u click that button your points go to zero and your rebirth counter goes up by 1 and u unlock the skilltreetab, the rebirth price then increases to a bigger prices and if u get enough points to press it again your score will reset again and rebirth \$\endgroup\$ – tmanrocks994 Jun 19 at 5:47
  • \$\begingroup\$ will be 2 . thus making a sort of unlocking system \$\endgroup\$ – tmanrocks994 Jun 19 at 5:47
0
\$\begingroup\$

First of all, I looked at your code and it should be fine and a lot jumped at me. So I'll write them here and you can check them. You are calculating rebirthCost in the buyRebirth() function. This can easily lead to code that acts 'funny'.

Also, instead of checking if cookies <= rebirthCost && rebirth < 1, make only one check (i.e. cookies <= rebirthCost) which will be done for all rebirth purchases and then follow up with the second check (i.e. rebirth < 1) where you perform the first purchase only operations.

Remove the checkTab() function from inside the if statement and move it out so that it always runs after a rebirth buy.

\$\endgroup\$
  • \$\begingroup\$ Ay, man, I need to leave it's late, but please leave a note here if any of the things I've written worked. \$\endgroup\$ – Kitanga Nday Jun 19 at 6:27
  • \$\begingroup\$ that didn't quite work. ty for trying tho. ill keep doing research on it. ive been busy with work/ other stuff. finally have time to work on my game more \$\endgroup\$ – tmanrocks994 Jun 25 at 3:55
  • \$\begingroup\$ i tried to remove this prntscr.com/o696p8 from first js and put it on the skilltree js and for some reason that doesnt work at all. the tabs never become hidden. i have something wrong with it or something sigh. just want this to work. was trying to see if it would hide the tabs if i put that function on a different html page \$\endgroup\$ – tmanrocks994 Jun 25 at 5:33
  • \$\begingroup\$ jsfiddle.net/tmanrocks999/xf0k52q7 heres a fiddle with all html files( need to be in diffrent files if u have a editor) and the js is the script part. css is the css part. so if u put eatch html part in its own file ( there is 3 ) then js own file then css own file. u can see what i mean by it only working for the first tab. if u leave first tab it reveals everything \$\endgroup\$ – tmanrocks994 Jun 25 at 5:39
  • \$\begingroup\$ codepen.io/tmanrocks999/project/editor/DKNEEv# heres a better thing. more open to edits. if I cant get some help to get my tabs to all stay hidden on a switch of tabs id appreciate it \$\endgroup\$ – tmanrocks994 Jun 25 at 7:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.