lyle200222 lyle200222 - 6 months ago 6
HTML Question

How to make something appear on an HTML webpage when Javascript variables are 'correct'?

If anyone is familiar with A Dark Room I'm trying to make a system like that. If I have 10 wood and 10 leaves, then a Build Tent button would appear. I can make the button invisible, but I can't make it reappear when wood>=10 and leaves>=10. Here's the snippets that I can't get to work;

function to get the tent button to appear in JS

function seeTent() {
if(wood >= 10 && leaves >= 10) {
document.getElementById('tentHide').style.display='block'; return false;
}


HTML counterpart

<button style="display: none"; id="tentHide"; onClick="buildTent()">Build Tent</button>


I'm just not sure if there's an event I can give it to do this after browsing through them so I'm stuck. I appreciate any help given, thanks!

Edit: Here's the full .js file

var wood = 0;
var rocks = 0;
var leaves = 0;

function collectWood(number) {
wood = wood + number
document.getElementById("wood").innerHTML = wood;
};

function collectRocks(number) {
rocks = rocks + number
document.getElementById("rocks").innerHTML = rocks;
};

function collectLeaves(number) {
leaves = leaves + number
document.getElementById("leaves").innerHTML = leaves;
};

function seeTent() {
if(wood >= 10 && leaves >= 10) {
document.getElementById('tentHide').style.display='block'; return false;
}
};

Answer

Since you want something to happen depending on what values wood and leaves contain, you need to call seeTent any time they do change. You can do this by explicitly calling seeTent() in both the functions that increment your wood and leaves variables.

function collectWood(number) {
    wood = wood +  number
    document.getElementById("wood").innerHTML = wood;
    seeTent();
};

function collectLeaves(number) {
    leaves = leaves +  number
    document.getElementById("leaves").innerHTML = leaves;
    seeTent();
};

If you are able to change your data around you could use Proxy to "watch" for when the data changes and trigger your function when the conditions are met

var data = {
    wood:0,
    leaves:0
};

var dataProxy = new Proxy(data,{
   set: function(target,propname,value){
      target[propname] = value;
      window.dispatchEvent( new CustomEvent("dataupdate") );
   }
});

window.addEventListener("dataupdate",seeTent);

function collectWood(number) {
    dataProxy.wood = dataProxy.wood +  number;
    document.getElementById("wood").innerHTML = dataProxy.wood;
};

Demo using Proxy/CustomEvent

var data ={
  wood: 0,
  rocks: 0,
  leaves: 0
},
woodBtn = document.getElementById("woodbtn"),
rocksBtn = document.getElementById("rocksbtn"),
leavesBtn = document.getElementById("leavesbtn"),
tentBtn = document.getElementById("tentbtn"),
woodEle = document.getElementById("wood"),
rocksEle = document.getElementById("rocks"),
leavesEle = document.getElementById("leaves");
    

var dataProxy = new Proxy(data,{
  set: function(target,propname,value){
    target[propname]=value;
    window.dispatchEvent(new CustomEvent("dataupdate"));
  }
});

window.addEventListener("dataupdate",seeTent);
woodBtn.addEventListener("click",collectWood);
rocksBtn.addEventListener("click",collectRocks);
leavesBtn.addEventListener("click",collectLeaves);



function collectWood(number) {
    dataProxy.wood = dataProxy.wood + 1;
    wood.innerHTML = dataProxy.wood;
};

function collectRocks(number) {
    dataProxy.rocks = dataProxy.rocks + 1;
    rocks.innerHTML = dataProxy.rocks;
};

function collectLeaves(number) {
    dataProxy.leaves = dataProxy.leaves +  1;
    leaves.innerHTML = dataProxy.leaves;
};

function seeTent() {
  if(dataProxy.wood >= 10 && dataProxy.leaves >= 10) {
    tentBtn.classList.remove("hidden");
    return false;
  }
};
.hidden {
  display:none;
}
#legend {
  position:absolute;
  top:0px;
  left:0px;
  background:black;
  color:white;
  font-size:12px;
  width:120px;
  padding:5px;
}
#controls {
  display:flex;
  position:fixed;
  bottom:0px;
  left:0px;
}
<div id="legend">
  <div>Wood <span id="wood"></span></div>
  <div>Rocks <span id="rocks"></span></div>
  <div>Leaves <span id="leaves"></span></div>
</div>
<div id="controls">
  <button id="woodbtn">Collect Wood</button>
  <button id="rocksbtn">Collect Rocks</button>
  <button id="leavesbtn">Collect Leaves</button>
  <button class="hidden" id="tentbtn">Build Tent</button>
</div>