hiding radio buttons until condition is met

Question

I am self taught when it comes to Javascript/html and i cant get my radio buttons to hide until a item is crafted https://jsfiddle.net/tmanrocks999/dfroan50/32/ I basically want all the radio buttons hidden except the first row (Woodsword, leather helm,leather boots, leather armor)

I do have a function in this fiddle that i wanted to use but it seems to not work. If someone can help me get all my radio buttons except the first row to be hidden until the item is crafted I would really appreciate it.

var Strength = 0;
var Magic = 0;
var ManaPoints = 0;
var HitPoints = 0;
var StoredStrengthe = Strength;
var StoredMagic = Magic;
var StoredManaPoints = ManaPoints;
var StoredHitPoints = HitPoints;

function woodsworde() {
  if (document.getElementById("woodsword").checked) {
    Strength = Strength + 1;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function silversworde() {
  if (document.getElementById("silversword").checked) {
    Strength = Strength + 3;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function goldsworde() {
  if (document.getElementById("goldsword").checked) {
    Strength = Strength + 5;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function diamondsworde() {
  if (document.getElementById("diamondsword").checked) {
    Strength = Strength + 10;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}



function leatherhelme() {
  if (document.getElementById("leatherhelm").checked) {
    Magic = Magic + 1;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function silverhelme() {
  if (document.getElementById("silverhelm").checked) {
    Magic = Magic + 3;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function goldhelme() {
  if (document.getElementById("goldhelm").checked) {
    Magic = Magic + 5;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function diamondhelme() {
  if (document.getElementById("diamondhelm").checked) {
    Magic = Magic + 10;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}


function leatherbootse() {
  if (document.getElementById("leatherboots").checked) {
    ManaPoints = ManaPoints + 3;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function silverbootse() {
  if (document.getElementById("silverboots").checked) {
    ManaPoints = ManaPoints + 5;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function goldbootse() {
  if (document.getElementById("goldboots").checked) {
    ManaPoints = ManaPoints + 10;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function diamondbootse() {
  if (document.getElementById("diamondboots").checked) {
    ManaPoints = ManaPoints + 15;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}


function leatherarmore() {
  if (document.getElementById("leatherarmor").checked) {
    HitPoints = HitPoints + 1;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function silverarmore() {
  if (document.getElementById("silverarmor").checked) {
    HitPoints = HitPoints + 3;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function goldarmore() {
  if (document.getElementById("goldarmor").checked) {
    HitPoints = HitPoints + 5;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function diamondarmore() {
  if (document.getElementById("diamondarmor").checked) {
    HitPoints = HitPoints + 10;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

document.getElementById("woodsword").addEventListener("change",
  silversworde);
document.getElementById("woodsword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  silversworde);
document.getElementById("goldsword").addEventListener("change",
  woodsworde);
document.getElementById("goldsword").addEventListener("change",
  goldsworde);
document.getElementById("diamondsword").addEventListener("change",
  woodsworde);
document.getElementById("diamondsword").addEventListener("change",
  diamondsworde);
document.getElementById("Strength").innerHTML = Strength;


document.getElementById("leatherhelm").addEventListener("change",
  silverhelme);
document.getElementById("leatherhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  silverhelme);
document.getElementById("goldhelm").addEventListener("change",
  leatherhelme);
document.getElementById("goldhelm").addEventListener("change", goldhelme);
document.getElementById("diamondhelm").addEventListener("change",
  leatherhelme);
document.getElementById("diamondhelm").addEventListener("change",
  diamondhelme);
document.getElementById("Magic").innerHTML = Magic;

document.getElementById("leatherboots").addEventListener("change",
  silverbootse);
document.getElementById("leatherboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  silverbootse);
document.getElementById("goldboots").addEventListener("change",
  leatherbootse);
document.getElementById("goldboots").addEventListener("change",
  goldbootse);
document.getElementById("diamondboots").addEventListener("change",
  leatherbootse);
document.getElementById("diamondboots").addEventListener("change",
  diamondbootse);
document.getElementById("ManaPoints").innerHTML = ManaPoints;



document.getElementById("leatherarmor").addEventListener("change",
  silverarmore);
document.getElementById("leatherarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  silverarmore);
document.getElementById("goldarmor").addEventListener("change",
  leatherarmore);
document.getElementById("goldarmor").addEventListener("change",
  goldarmore);
document.getElementById("diamondarmor").addEventListener("change",
  leatherarmore);
document.getElementById("diamondarmor").addEventListener("change",
  diamondarmore);
document.getElementById("HitPoints").innerHTML = HitPoints;



var silversword = 0;
document.getElementById("silversword").innerHTML = silversword;
var silverhelm = 0;
var silverboots = 0;
var silverarmor = 0;
var Silver = 500;
document.getElementById("Silver").innerHTML = Silver;
var goldsword = 0;
document.getElementById("goldsword").innerHTML = goldsword;
var goldhelm = 0;
var goldboots = 0;
var goldarmor = 0;
var Gold = 2000;
document.getElementById("Gold").innerHTML = Gold;
var diamondsword = 0;
document.getElementById("diamondsword").innerHTML = diamondsword;
var diamondhelm = 0;
var diamondboots = 0;
var diamondarmor = 0;
var Diamond = 10000;
document.getElementById("Diamond").innerHTML = Diamond;

function buySsword() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silversword = silversword + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silversword").innerHTML = silversword;
  }
  checkcraft()
}

function buyGsword() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldsword = goldsword + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldsword").innerHTML = goldsword;
  }
  checkcraft()
}

function buyDsword() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondsword = diamondsword + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondsword").innerHTML = diamondsword;
  }
  checkcraft()
}

function buyShelm() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverhelm = silverhelm + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverhelm").innerHTML = silverhelm;
  }
  checkcraft()
}

function buyGhelm() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldhelm = goldhelm + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldhelm").innerHTML = goldhelm;
  }
  checkcraft()
}

function buyDhelm() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondhelm = diamondhelm + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondhelm").innerHTML = diamondhelm;
  }
  checkcraft()
}

function buySboots() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverboots = silverboots + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverboots").innerHTML = silverboots;
  }
  checkcraft()
}

function buyGboots() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldboots = goldboots + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldboots").innerHTML = goldboots;
  }
  checkcraft()
}

function buyDboots() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondboots = diamondboots + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondboots").innerHTML = diamondboots;
  }
  checkcraft()
}

function buySarmor() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverarmor = silverarmor + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverarmor").innerHTML = silverarmor;
  }
  checkcraft()
}

function buyGarmor() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldarmor = goldarmor + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldarmor").innerHTML = goldarmor;
  }
  checkcraft()
}

function buyDarmor() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondarmor = diamondarmor + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondarmor").innerHTML = diamondarmor;
  }
  checkcraft()
}


function checkcraft() {
  if (silversword < 1) {
    document.getElementById("SilverSwordBtn").disabled = false;
  } else {
    document.getElementById("SilverSwordBtn").disabled = true;
  }
  if (goldsword < 1) {
    document.getElementById("GoldSwordBtn").disabled = false;
  } else {
    document.getElementById("GoldSwordBtn").disabled = true;
  }
  if (diamondsword < 1) {
    document.getElementById("DiamondSwordBtn").disabled = false;
  } else {
    document.getElementById("DiamondSwordBtn").disabled = true;
  }
  if (silverhelm < 1) {
    document.getElementById("SilverHelmBtn").disabled = false;
  } else {
    document.getElementById("SilverHelmBtn").disabled = true;
  }
  if (goldhelm < 1) {
    document.getElementById("GoldHelmBtn").disabled = false;
  } else {
    document.getElementById("GoldHelmBtn").disabled = true;
  }
  if (diamondhelm < 1) {
    document.getElementById("DiamondHelmBtn").disabled = false;
  } else {
    document.getElementById("DiamondHelmBtn").disabled = true;
  }
  if (silverboots < 1) {
    document.getElementById("SilverBootsBtn").disabled = false;
  } else {
    document.getElementById("SilverBootsBtn").disabled = true;
  }
  if (goldboots < 1) {
    document.getElementById("GoldBootsBtn").disabled = false;
  } else {
    document.getElementById("GoldBootsBtn").disabled = true;
  }
  if (diamondboots < 1) {
    document.getElementById("DiamondBootsBtn").disabled = false;
  } else {
    document.getElementById("DiamondBootsBtn").disabled = true;
  }
  if (silverarmor < 1) {
    document.getElementById("SilverArmorBtn").disabled = false;
  } else {
    document.getElementById("SilverArmorBtn").disabled = true;
  }
  if (goldarmor < 1) {
    document.getElementById("GoldArmorBtn").disabled = false;
  } else {
    document.getElementById("GoldArmorBtn").disabled = true;
  }
  if (diamondarmor < 1) {
    document.getElementById("DiamondArmorBtn").disabled = false;
  } else {
    document.getElementById("DiamondArmorBtn").disabled = true;
  }
}

checkcraft()


var silverswordr = document.getElementById('silverswordr');
var goldswordr = document.getElementById('goldswordr');
var diamondswordr = document.getElementById('diamondswordr');

function checkWunlock() {
  if (silversword < 1) {
    silverswordr.style.visibility = 'hidden'
  } else {
    silverswordr.style.visibility = 'visible'
  }
  if (goldsword < 1) {
    goldswordr.style.visibility = 'hidden'
  } else {
    goldswordr.style.visibility = 'visible'
  }
  if (diamondsword < 1) {
    diamondswordr.style.visibility = 'hidden'
  } else {
    diamondswordr.style.visibility = 'visible'
  }

}

checkWunlock()

//document.getElementById("").addEventListener("change", checkWunlock);

<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 id="Equipmentradios" 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="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   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="diamondboots"   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>
                    
            <div id="crafting" 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>
                    Magic+<span id="Magic">0</span>
                    ManaPoints+<span id="ManaPoints">0</span>
                    HitPoints+<span id="HitPoints">0</span>
                    <br />
                    Silver= <span id="Silver">0</span>  <span id="silversword">0</span>
                    <br />
                    Gold= <span id="Gold">0</span>     <span id="goldsword">0</span>
                    <br />
                    Diamond= <span id="Diamond">0</span>  <span id="diamondsword">0</span>
                        </div>
                    
                   
       
        
                    
                <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>

Everything should be in that fiddle. What i tried is at the very button with checkWunlock for checking if weapon is crafted or not. I expect all my radio buttons except the first row to be hidden until crafted, but the actual output all my radio buttons are visible making it so the player can use any equipment at the start. My disabling of the craft buttons work so im confused on why the hidden stuff wont work as well. If i can get a working way to hide my radio buttons id appreciate it.

Answer 1

I've modified your code.

html

<input type="radio" name="Type" value="flat" id="flatRadio" />Wood Sword
<input type="radio" name="Type" value="salary" id="salaryRadio" />Silver Sword

<br />
<div id="wordSword" class="options">Wood Sword:
    Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
            Silver Helm <input id="silverhelm"   type="radio" name="Helm">
            Gold Helm <input id="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   type="radio" name="Helm"></div>
<div id="silverSword" class="options">Silver Sword:
     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="diamondboots"   type="radio" name="Boots"></div>

css

.options {
display:none;

for more code go to demo for full code

Hope can help you