if/else | Changing html in jquery

Question

$("#button_announcement").click(function(){ 
    $('#button_announcement').html('Hide') ? $(this).html('Show') : $(this).html('Hide');
});

I have a button on my page which show/hide my announcement. I wanted to change button html after clicking it but this code change just once from 'hide' to 'show' it don't want to change from show to hide... What am I doing wrong?

.html('Hide') will always set the HTML to Hide. It won't retrieve the HTML — j08691
– j08691, Commented Jan 24, 2018 at 15:18

31piy · Accepted Answer · 2018-01-24 15:15:20Z

1

Change this:

$('#button_announcement').html('Hide') ? ...

to this:

$('#button_announcement').html() === 'Hide' ? ...

The former just assigns 'Hide' as the HTML always, but the latter checks if the HTML of #button_announcement is 'Hide'.

answered Jan 24, 2018 at 15:15

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

szpanel Over a year ago

It works when i change just condition. $('#button_announcement').html() === 'Hide' Should I change the rest of the code similar to this? And another question. Why did you use three characters equals? Im new in jquery and as i remember in JS i never used '==='.

31piy Over a year ago

@szpanel -- 1) Yes, you will have to use such code at every place where you want such work. Please look at Rory's answer as well because it is quite efficient. 2) Have a look at this discussion.

Rory McCrossan · Accepted Answer · 2018-01-24 15:16:27Z

1

The issue is because you're using the setter of html() in the condition. You need to use the getter and check the value instead. Note that using the text() method here would be better practice:

$("#button_announcement").click(function(){ 
    $(this).text() == 'Hide' ? $(this).text('Show') : $(this).text('Hide');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button_announcement">Hide</button>

Alternatively you can provide a function to text() which updates the value based on its current setting. This avoids the need for the explicit getter:

$("#button_announcement").click(function() {
  $(this).text(function(i, t) {
    return t == 'Hide' ? 'Show' : 'Hide';
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button_announcement">Hide</button>

answered Jan 24, 2018 at 15:16

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

2 Comments

szpanel Over a year ago

$("#button_announcement").click(function(){      $('#button_announcement').text() == 'Hide' ? $(this).text('Show') :      $(this).text('Hide');     });

$("#button_announcement").click(function(){ 		$('#button_announcement').html() === 'Hide' ? $(this).html('Show') : $(this).html('Hide'); 	});

Thank you. Just ask, both are correct?

Rory McCrossan Over a year ago

Yes, although I would use the this reference within the event handler to save a DOM access.

Collectives™ on Stack Overflow

if/else | Changing html in jquery

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related