Change Login or Logout text based on status

Question

I'm trying to display text in a button in the header that says "LOG IN" or "LOG OUT" depending on the visitor's status. The button calls a slider action, so I just need to change the text displayed on it.

I have found snippets like this, but they go into index.php, and I don't know how to add them to the button. (In my header.php)

if ( is_user_logged_in() ) {
    echo 'Welcome, registered user!';
} else {
    echo 'Welcome, visitor!';
};

I think the solution might be to name it in my .js file, and have the action there as well. This is my first attempt, and have no idea if this is the correct way to achieve this.

jQuery(document).ready(function(){
if ( is_user_logged_in() ) {
    document.getElementById("visitorstatus").innerHTML = "LOG OUT";
} else {
    document.getElementById("visitorstatus").innerHTML = "LOG IN";
};
});

And then to add <div id="visitorstatus"> to the button in header.php? Please be kind! I'm new to PHP/JS

ETA header.php

<div class="memberpresswindow">
<button type="button" class="hide-btn">X</button>
<?php echo do_shortcode( "[mepr-login-form]" ); ?>
<?php echo do_shortcode( "[mepr-membership-registration-form id=702]" ); ?> 
<br>
<hr>
<button type="button" class="hide-btn">CLOSE</button> 
</div>
<button type="button" class="show-btn">LOG IN | REGISTER

</button>
            </div>

Answer 1

You have the PHP IF statement needed, is_user_logged_in().

Just add your button to that and you should be good. Something this...

<?php if (is_user_logged_in()) {
    echo '<button type="button" class="show-btn">LOG IN</button>';
} else {
    echo '<button type="button" class="show-btn">REGISTER</button>';
}; ?>

Note: You have an extra </div> in your code above.