CODEWITHSUNDEEP
javascriptjqueryhtml
Steve Joiner
Steve Joiner

Reputation: 503

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

Upvotes: 0

Views: 5985

Answers (5)

PhilMaGeo
PhilMaGeo

Reputation: 551

Here is my answer in simple js. Hope it will help you :-)

You have your p tags already prepared and hidden

You will show the right one using style.display if it is set to "none" it will disappear, if it is set to "block" then it will appear. You get sort of pointers to the p tags that are already hidden at load time (toRemainder, toQualify ...) And then you show the right p tag according to the result of the calculation. A mystery remains : What do you want to do when r < 0 ? ;-)

Figures are random so you can test all the possible ouputs

var f = Math.round(Math.random() * (60 - 50) + 50);
var c = Math.round(Math.random() * (30 - 25) + 25);
var r = Math.round(f / 2) - c
var toRemainder =  document.getElementById("remaining");
var toQualify = document.querySelector(".qualify");
var toCount = document.querySelector(".count");
var toSurprise = document.querySelector(".surprise");

 if(r==0){
 	toQualify.style.display = "block";
 }
 else if(r>0){
	toRemainder.innerHTML = r;
	toCount.style.display = "block";
 }
 else{
  toSurprise.style.display = "block";
 }
<p class="qualify" style="display:none;">You have a sufficient amount of leaseholders to qualify for Right to Manage</p>
<p class="count" style="display:none;">You need <span id="remaining"></span> more consenting leaseholders to qualify</p>
<p class="surprise" style="display:none;"> r < 0 : What do you want to do here ?</p>

Upvotes: 0

edkeveked
edkeveked

Reputation: 18381

Here I suppose that you don't have both paragraphs yet in your html page. Using the selector $('body'), you can append the paragraph according to the value of r.

<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) {
   $('body').append("<p class="qualify">You have a sufficient amount of leaseholders to qualify for Right to Manage</p>")
}
else if(r > 0){
   $('body').append("<p class="count">You need <span id="remaining"></span> more consenting leaseholders to qualify</p>")
}

</script>

Upvotes: 0

Umair Mohammad
Umair Mohammad

Reputation: 4635

You can put id attribute in both of these elements and then based on value of r , either display/hide either of them.

`

<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;
    r = Number(r);
    if (r == 0) {
        document.getElementById('when0').style.display='block';
        document.getElementById('whenlarge0').style.display='none';
    } else if (r > 0) {
        document.getElementById('whenlarge0').style.display='block';
        document.getElementById('when0').style.display='none';
    }
</script>

`

And your HTML becomes like this : 

<p id='whenlarge0' class="qualify">You have a sufficient amount of leaseholders to qualify for Right to Manage</p>

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

Upvotes: 1

sanepete
sanepete

Reputation: 1120

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.

Upvotes: 1

Demilade
Demilade

Reputation: 513

You need to give the

tags id and in your javascript code write an if statement to test your conditions, hide or show your

tags:

document.getElementById("your_id").style.display = "none"  // to hide
document.getElementById("your_id").style.display = "block" // to show

Upvotes: 0

Related Questions