How do I make a button enable with an if statement?

Question

<script>
    var tic;
    tic = 0;
</script>

 <script>
    var ongngic;
    ongngic = 1;
</script>

<button onclick="alert(tic=tic+ongngic);">Ice Cream</button>
<button id= "b1" onclick="alert(ongngic=ongngic+1, tic=tic-10);" disabled="disabled">Buy 'Jimmy's Ice Cream Stand' - 10 Ice Cream</button>

<script>
    function myFunction() {
        document.getElementById("b1").enabled = true;
    }
</script>

<script>
    if(var tic > 9){
        myFunction();
    }
</script>

When I click the 'Ice Cream' button 10 times, the id = 1 button should enable but doesn't. Can anyone help me?

Answer 1

There are a few problems with your code.

Firstly remove the var inside the if statment you are just declaring the variable again.

The code in your script tag is running when the page is loading and the if statment is therfore only checked once. Instead run a function everytime you click the button.

<button onclick="iceCreamButton();">Ice Cream</button>

function iceCreamButton(){
    alert(tic=tic+ongngic);

    if(tic > 9){
        myFunction();
    }
}

Also the code inside myFunction is not correct change it to this:

document.getElementById("b1").disabled  = false;

Answer 2

Check this code

<script>
    var tic;
    tic = 0;
</script>

 <script>
    var ongngic;
    ongngic = 1;
</script>


<button onclick="clickFun();">Ice Cream</button>
<button id= "b1" onclick="alert(ongngic=ongngic+1, tic=tic-10);" disabled="disabled">Buy 'Jimmy's Ice Cream Stand' - 10 Ice Cream</button>

<script>
    function myFunction() {     
        document.getElementById("b1").disabled = false;
    }
</script>

<script>
 function clickFun(){
        tic+=ongngic;
        alert(tic);
        if(tic > 9){
            myFunction();
        }
    }

Answer 3

    var tic;
    tic = 0;

    var ongngic;
    ongngic = 1;
     
    function myFunction() {
      document.getElementById("b1").disabled = false;
    }
         
    function cal(){
      tic=tic+ongngic;
       alert(tic);  
      if(tic > 9){
          myFunction();
      }
    }

<button onclick="cal()">Ice Cream</button>
<button id= "b1" onclick="alert(ongngic=ongngic+1, tic=tic-10 );" disabled="disabled">Buy 'Jimmy's Ice Cream Stand' - 10 Ice Cream</button>

 

Answer 4

There is couple of problems in your code (some was mentioned by other guys), I prefer to use jQuery for dealing with DOM, but as you wrote your code in pure JavaScript, I didn't use jQuery in my code. for many reason you should avoid inline JS, basically don't mix HTML with JS as much as possible. you can find useful info about that here on SO: onclick=“” vs event handler

If you don't familiar with addEventListener, here is good start to learn about that: EventTarget.addEventListener()

HTML

<button id="toggle">Ice Cream</button>
<button id="target" disabled="disabled">Buy 'Jimmy's Ice Cream Stand' - 10 Ice Cream</button>

JS

var toggle = document.getElementById('toggle'),
    target = document.getElementById('target'),
    tic = 0,
    ongngic = 1,
    myFunction = function() {
        target.removeAttribute('disabled');
    };

toggle.addEventListener('click', function() {
    tic = tic + ongngic;
    console.log(tic);
    // alert(tic);

    if (tic > 9) myFunction();
}, false);

target.addEventListener('click', function() {
    ongngic = ongngic + 1;
    tic = tic - 10;

    var msg = 'tic:' + tic + ', ongngic: ' + ongngic;
    console.log(msg);
    // alert(msg);
}, false);

jsfiddle

Answer 5

From what I understand you're trying to do, you'll need a click event listener for both buttons that check different things.

The "ice cream" button when clicked will increment it's own counter and enable the "ice cream stand" button when it hits 10. The "ice cream stand" button when clicked decreases the "ice cream" counter by 10 and increases it's own counter by 1. It also disables itself if the "ice cream" counter is lower than 10 in the end.

var count_ice_cream = 0;
var count_ice_cream_stands = 0;

$('btn_ice_cream').addEventListener("click", function(e) {
  count_ice_cream++;

  if (count_ice_cream > 9) {
    $('btn_ice_cream_stands').disabled = false;
  }

  update_totals();
});

$('btn_ice_cream_stands').addEventListener("click", function(e) {
  count_ice_cream_stands++;
  count_ice_cream = (count_ice_cream - 10);

  $('btn_ice_cream_stands').disabled = !(count_ice_cream >= 10);

  update_totals();
});

function update_totals() {
  $('count_ice_cream').innerHTML = count_ice_cream;
  $('count_ice_cream_stands').innerHTML = count_ice_cream_stands;
}

// Shh, don't use this in production
function $(s) {
  return document.getElementById(s)
}

body {
  font: 400 1em/1.4 sans-serif;
}

<button id="btn_ice_cream">
  Ice Cream: <b id="count_ice_cream">0</b>
</button>
<br>
<button id="btn_ice_cream_stands" disabled>
  Ice Cream Stands: <b id="count_ice_cream_stands">0</b>
</button>

Answer 6

I hope this helps - place myFunction() in -

onclick="alert(tic=tic+ongngic); myFunction()">Ice Cream</button>

and add this below line in myFunction() -

document.getElementById("b1").disabled = false;

So If you want to enable the button you should set .disabled property as false.