Q:

Show/Hide HTML elements based on their innerHTML

I am using the following small piece of Javascript to make a basic calculation from two variable amounts and then display that value using innerHTML My javascript knowledge is limited so I had help putting this together.
<script>
 var f = "<?php echo $row_rsFormData['total_flats']; ?>";
 var c = "<?php echo $row_rsCount['count']; ?>";
 var r = Math.round(f / 2) - c
 document.getElementById("remaining").innerHTML = r;
</script>

I want to show different elements depending on the value of ' var r'
if var r = 0 
I want to display this:
<p class="qualify">You have a sufficient amount of leaseholders to qualify for Right to Manage</p>

if var r > 0 
I want to display this:
<p class="count">You need <span id="remaining"></span> more consenting leaseholders to qualify</p>

I realise this is simple for most.. so please be kind.
Thanks in advance

A:

I can't believe this hasn't been answered yet.
As the tags for the question are all client side, I have a client side solution:
<script>
 var f = "<?php echo $row_rsFormData['total_flats']; ?>";
 var c = "<?php echo $row_rsCount['count']; ?>";
 var r = Math.round(f / 2) - c
 document.getElementById("remaining").innerHTML = r;
 if(r = 0)
 {
  $('#quality').show();
 }
 if(r > 0)
 {
  $('#count').show();
 }
</script>

Add an id attribute to both of your tags:
<p id="qualify" class="qualify">You have a sufficient amount of leaseholders to qualify for Right to Manage</p>

<p id="count" class="count">You need <span id="remaining"></span> more consenting leaseholders to qualify</p>

And initially hide them in the CSS:
#quality, #count
{
 display:none;
}

I hope this helps.

