if element hasClass change innerHTML

Question

I am trying to toggle the text inside the .info_toggle class using an if condition. I am stuck and would very much appreciate it if someone could help me to understand why my current code doesn't work.

JS:

$( '.info_toggle').click(function() {
  $("body").toggleClass( "info-page-open" );
});


if ('info-page-open') {
  $('.info_toggle').text('CLOSE');
} else  {
  $('.info_toggle').text('INFO');
}

CSS:

.info_toggle {
    position: absolute;
    top:15px;
    left:20px;
    z-index: 6;
    color: #000;
}


.info-page {
    width: 100%;
    height:100%;
    position: absolute;
    top:0px;
    left:0px;
    background-color: rgb(0,0,0, .5);
    z-index: 5;
    opacity: 0;
    z-index: 0;
    transition: all 0.25s ease-in;
}

body.info-page-open .info-page {
    opacity: 1.0;
    z-index: 5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<body>

<a href="#" class="info_toggle">INFO
    </a>

  <div class="info-page">
  </div>

</body>

I think you should move this `if ('info-page-open')` condition in `$( '.info_toggle').click` event and use this function [if-element-has-a-class](https://stackoverflow.com/questions/9532639/how-check-if-body-has-a-specific-class-with-javascript/9532714) — iamimran, Dec 22 '19 at 06:19

score 2 · Accepted Answer · answered Dec 22 '19 at 06:14

You got two problems:

You were not checking properly with the if statement if the element has the class info-page-open.
You need to wrap the if statement inside the click method that toggles the class.

You can use this code snippet:

$( '.info_toggle').click(function() {
  $("body").toggleClass( "info-page-open" );

  if ($("body").hasClass('info-page-open')) {
    $('.info_toggle').text('CLOSE');
  } else  {
    $('.info_toggle').text('INFO');
  }
});

score 2 · Answer 2 · answered Dec 22 '19 at 06:14

You are having an issue with your code because of this line:

if ('info-page-open') { <-----

What does it signify? You're if condition is evaluating the string 'info-page-open' and not the element you wish to check.

What you should do (and this is by guessing), is to find the element with the class 'info-page-open' and ask if in it's classList, the info-page-open class is found.

You can access the classList by dot notation (yourElement.classList)

glinda93 · Answer 3 · 2019-12-22T06:24:36.263

I think this might be a solution to your problem:

 $( '.info_toggle').click(function() {
    $("body").toggleClass( "info-page-open" );
    if ($('body').hasClass('info-page-open')) {
   $('.info_toggle').text('CLOSE');
  } else  {
   $('.info_toggle').text('INFO');
  }
 });

.info_toggle {
 position: absolute;
 top:15px;
 left:20px;
 z-index: 6;
 color: #000;
}


.info-page {
 width: 100%;
 height:100%;
 position: absolute;
 top:0px;
 left:0px;
 background-color: rgb(0,0,0, .5);
 z-index: 5;
    opacity: 0;
 z-index: 0;
 transition: all 0.25s ease-in;
}

body.info-page-open .info-page {
 opacity: 1.0;
 z-index: 5;
}

<body>

<a href="#" class="info_toggle">INFO
 </a>
  
  <div class="info-page">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
</body>

if element hasClass change innerHTML

3 Answers3