CODEWITHSUNDEEP
javascript
AzDeveloper
AzDeveloper

Reputation: 341

Javascript "if" statement does not work

I'm new to programming with Javascript. I've been trying fixing this "if" statement for hour. I don't see any proplem with it. Please have a look and tell me what's wrong!

    <!DOCTYPE HTML>
    <HTML>
    <body>
    <head>
    <style>
    button {
    	font-size:14px
    }
    button.hide {
    	display:none
    }
    </style>
    <title>Candy Box REMAKE</title>
    <script type="text/javascript">
    var candies = 0;
    function addCandies() {
    	candies ++;
    	document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    };
    function add10Candies() {
    	candies += 10;
    	document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    };
    function throwCandies() {
    	candies -= 10;
    	document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    };
    if (candies >= 30) {
    	document.getElementById('add10Candies').style.display = "block";
    };
    </script>
    <p id="numberOfCandies">You got 0 candy</p>
    <button onclick="addCandies()">Get a candy.</button>
    <button onclick="throwCandies()">Throw 10 candies away.
    <button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button>
    </body>
    </HTML>

So this part:

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

doesn't work (show the hidden button) when i get enough candies.

Upvotes: 1

Views: 165

Answers (7)

Helga
Helga

Reputation: 23

I've add checkIs30Candies() function. Also have changed style to style.display = "inline-block" (in you case it have to be inline-block, I suppose)

And you had a typo

<button class="hide" id="add10Candies" onclick="add10Candies">Get 10 candies.</button>

It should be onclick="add10Candies()", with braces to invoke a function

<!DOCTYPE HTML>
<HTML>
<body>
<head>
<style>
button {
    font-size:14px
}
button.hide {
    display:none
}
</style>
<title>Candy Box REMAKE</title>
<script type="text/javascript">
var candies = 0;
function checkIs30Candies() {
	if (candies >= 30) {
	    document.getElementById('add10Candies').style.display = "inline-block";
	} else {
		document.getElementById('add10Candies').style.display = "none";
	}
}
function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
  
  checkIs30Candies();
};
function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
};
function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
  
  checkIs30Candies();
};


</script>
<p id="numberOfCandies">You got 0 candy</p>
<button onclick="addCandies()">Get a candy.</button>
<button onclick="throwCandies()">Throw 10 candies away.
<button class="hide" id="add10Candies" onclick="add10Candies()">Get 10 candies.</button>
</body>
</HTML>

Upvotes: 1

Mistalis
Mistalis

Reputation: 18269

Put your code in a function:

function checkCandiesQuantity() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    } else {
        document.getElementById('add10Candies').style.display = "none";
    }
}

Call it when you update the quantity:

function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandiesQuantity();
};

Upvotes: 1

cmroanirgo
cmroanirgo

Reputation: 7447

Perhaps one simpler way to write this is (there are also increasing levels of 'simpler' as well). Reuse the common bits of code when you can.

PS: I fixed what I assumed to be a grammatical error in the message:

<script type="text/javascript">
var candies = 0;
function updateCandies() {
    var e = document.getElementById('numberOfCandies');
    e.innerHTML = "You [edit:] have " + candies + " candies.";
    e.style.display = candies>=30 ? "block" : "none";
}

function addCandies() {
    candies ++;
    updateCandies();
};
function add10Candies() {
    candies += 10;
    updateCandies();
};
function throwCandies() {
    candies -= 10;
    updateCandies();
};
</script>

Upvotes: 0

mrid
mrid

Reputation: 5796

You need to add this code 

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

in each of the functions you have defined.

What is happening right now :

Step 1 :

var candies = 0;

Step 2 :

<declarations of functions>

Step 3 :

if (candies >= 30) {
    document.getElementById('add10Candies').style.display = "block";
};

So after initialization and function declarations, the control directly passes to your if condition and since candies = 0 nothing happens.

When you call any of these functions, the function executes but since the if condition is outside the function, it is not executed.

Upvotes: 0

Hezron
Hezron

Reputation: 352

put your if statement in each function. At the moment it only runs once, when the page loads.

Upvotes: 4

long.luc
long.luc

Reputation: 1191

You should put the if statement in other functions that change candies amount.

function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";

    checkCandies();
}

function checkCandies() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    }
}

Upvotes: 0

Johnny Kutnowski
Johnny Kutnowski

Reputation: 2390

The issue is that this if check runs only once when you load the page. A possible solution would be to create a checkCandies() function that is called within all the other functions:

var candies = 0;
function addCandies() {
    candies ++;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};
function add10Candies() {
    candies += 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};
function throwCandies() {
    candies -= 10;
    document.getElementById('numberOfCandies').innerHTML = "You got " + candies + " candies.";
    checkCandies();
};

function checkCandies() {
    if (candies >= 30) {
        document.getElementById('add10Candies').style.display = "block";
    };
}

Upvotes: 2

Related Questions