title: How to make a button only visible under certain condition(the condition increase everytime one clicks the button?)
body: <p>I am making a Javascript game, where I would like a button (class = &quot;build&quot;) to only be visible under certain conditions, and the condition would increase every time after one click the button.</p>
  <p>To increase the number by 1, click the &quot;gather&quot; button. To make it more effective, click the &quot;build&quot; button to automatically increase the number by 0.1 per second. That is what's happening in the code below.</p>
  <p>But I would like the &quot;build&quot; button to be only visible after the number reached 10. The &quot;build&quot; button would decrease the current number by 50% when one clicks it so that it would become invisible after being clicked.</p>
  <p>The second time, the &quot;build&quot; button would only be visible when the number reached 12. Click it, the number decreases 50%, the &quot;build&quot; button disappears. The third time the button would become visible when the number reached 14 (so it's +2 every time&quot;), click it, the number decreases 50%, the &quot;build&quot; button disappears and it goes on and on.</p>
  <p>Is there any way for this to work? Thanks!</p>
  <pre><code>
  let btn1 = document.querySelector(&quot;.btn1&quot;);
  let btn2 = document.querySelector(&quot;.btn2&quot;);
  let num = document.getElementById(&quot;num&quot;);
  let increment = 0;
  
  function toGather(){
  num.innerHTML++;
  }
  
  btn1.addEventListener(&quot;click&quot;,toGather)
  
  function toBuild() {
  increment+=.1
  
  if (increment == .1){
    setInterval(() =&gt; {
      num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
      
      
    }, 1000)} else num.innerHTML =parseFloat(parseInt((parseFloat(num.innerHTML)+.05+increment)*10)/10);
  }
  
  btn2.addEventListener(&quot;click&quot;,toBuild);
  </code></pre>
  <pre><code>
  &lt;span id=&quot;num&quot;&gt;0&lt;/span&gt;
  &lt;button class=&quot;btn1&quot;&gt;Gather&lt;/button&gt;
  &lt;button class=&quot;btn2&quot;&gt;Build&lt;/button&gt;
  </code></pre>