Laravel notification bell

Question

I have a question.

I have kind of this in my app. When I have 0 notifications, it becomes 0.

What I want is to delete the number, so it has only the bell (without number, and without that red background)

My code:

<a href="#" class="m-nav__link m-dropdown__toggle" id="m_topbar_notification_icon">
    <span class="m-nav__link-icon">
       <span class="m-nav__link-icon-wrapper">
          <i class="flaticon-music-2"></i>
       </span>
       <span class="m-nav__link-badge m-badge m-badge--success " id="notification">
       </span>
    </span>
</a>

I am trying to do it with JavaScript:

<script>
  if(document.getElementById('notification').value() ===0)
  {
     document.getElementById('notification').style.display='none';
  }
</script>

Nothing happens. It still displays the bell with 0.

Can you confirm that your js is actually firing without error? Is that — Tarek Adam, Mar 12 '19 at 12:54
@TarekAdam has a point. See this question and answer: https://stackoverflow.com/questions/1829925/javascript-getelementbyid-not-working — D Malan, Mar 12 '19 at 13:08
Do you need javascript for this? You can use css _pseudo class_ [empty](https://developer.mozilla.org/en-US/docs/Web/CSS/:empty) - `.notification:empty{display: none};` - assuming `#notification` is the element that contains the number. — Lewis, Mar 12 '19 at 13:20
your span has no "value()" method. and value property too. it is not an input. but you can use, for example, "innerText" property to get your notifications count — Roman Meyer, Mar 12 '19 at 13:26

score 1 · Answer 1 · answered Mar 12 '19 at 13:27

I know your question uses Javsacript but as a simpler alternative, you could do this with the css pseudo class empty. However, you'd have to not output the number at all if it was 0.

.notification{
  background: red;
  color: white;
  padding: 5px;
}

.notification:empty {
  display: none;
}

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="badge">
  <i class="fa fa-bell"></i>
  <span class="notification">4</span>
</div>

<div class="badge">
  <i class="fa fa-bell"></i>
  <span class="notification"></span>
</div>

score 1 · Answer 2 · answered Mar 13 '19 at 08:55

Instead of using .value(), try using .innerHTML to check if notifications === 0. .innerHTML gets or sets the HTML or XML contained within the element while .value() gets the value property of the element. https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

if(document.getElementById('notification').innerHTML === '0')
{
  document.getElementById('notification').style.display = 'none';
}

Since you are using Laravel, I suggest you use the blade @if statement https://laravel.com/docs/master/blade#if-statements

@if(notifications > 0)
  <span class="m-nav__link-badge m-badge m-badge--success " id="notification">{{ notifications }}</span>
@endif

score 0 · Answer 3 · answered Mar 12 '19 at 14:13

0

Are you using blade? If so put a check around the element.

@if(notifications > 0)
  this will only be displayed if there are greater notifications than 0
@endif

If you really want to use js, try to comment above this one

answered Mar 12 '19 at 14:13

Jasper Helmich

668
4
21

Laravel notification bell

3 Answers3