rybakovluka
rybakovluka

Reputation: 1

Hide a value that has 0

please tell me how to do in this function so that the value having 0 is not displayed

const elements = document.querySelectorAll('.age-count')

elements.forEach(function(el) {
  const count = el.textContent
  const title = declination(count, [' год', ' года', ' лет'])
  const age = count + title

  el.textContent = age
})

function declination(number, titles) {
  cases = [2, 0, 1, 1, 1, 2];
  return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
}
<div class="age-count">22</div>
<div class="age-count">0</div>

Upvotes: 0

Views: 47

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

To hide the element check that it's text is equal to 0, and if so set it to display: none.

const elements = document.querySelectorAll('.age-count')

elements.forEach(function(el) {
  const count = el.textContent
  
  if (+count === 0)
    el.style.display = 'none';
    
  const title = declination(count, [' год', ' года', ' лет'])
  const age = count + title

  el.textContent = age
})

function declination(number, titles) {
  cases = [2, 0, 1, 1, 1, 2];
  return titles[(number % 100 > 4 && number % 100 < 20) ? 2 : cases[(number % 10 < 5) ? number % 10 : 5]];
}
<div class="age-count">22</div>
<div class="age-count">0</div>

Note that this still follows the logic to update the text within the element, even though it has been hidden. You can easily amend the logic flow to avoid that, though.

Upvotes: 1

Related Questions