Click event doesn't trigger the 'else if' statement in jQuery

Question

Click event doesn't trigger the 'else if' statement in jQuery

Having trouble with a button click issue. In the following code, when the button is clicked, it checks if the text on the button is "day". If so, it changes the background-color of the body to red and updates the button text to "night". I am struggling with making the body background color revert and changing the button text back to "day" when the button with "night" text is clicked.

var buttonText = $('button').text();

$('button').click(function() {
  if (buttonText == 'day') {
    $('body').css({
      'background': 'red'
    })
    $('button').text('night');
  } else if (buttonText == 'night') {
    $('body').css({
      'background': 'yellow'
    })
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>

<p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<button type="button" name="button">day</button>

javascript jquery html css

Answer 1

Answer №1

When it comes to programming, there are some practices that should be avoided at all costs. It is not advisable to base your logic on presentation, such as HTML values, or to directly manipulate HTML elements with CSS.

Instead, it is recommended to use classes for both your logic and presentation. This helps in maintaining a clean and organized code structure.

If you want to learn more about decoupling your HTML, CSS, and JavaScript, check out this article.

$('.js-update').click(function(e) {
  var $btn = $(e.currentTarget);  
  var addClass = $btn.data('addclass');
  var removeClass = $btn.data('removeclass');
  var target = $btn.data('target');
  $(target).addClass(addClass).removeClass(removeClass);
})

.day {
  background: red;
}
.night {
  background: yellow;
}

.day .btn-day,
.night .btn-night {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="training.css">
    </head>
    <body class="day">
        <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <button class="js-update btn-day"type="button" name="button" data-target="body" data-addclass="day" data-removeclass="night">day</button>
        <button class="js-update btn-night" type="button" name="button" data-target="body" data-addclass="night" data-removeclass="day">night</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
        
    </body>
</html>

Answer 2

When it comes to programming, there are some practices that should be avoided at all costs. It is not advisable to base your logic on presentation, such as HTML values, or to directly manipulate HTML elements with CSS.

Instead, it is recommended to use classes for both your logic and presentation. This helps in maintaining a clean and organized code structure.

If you want to learn more about decoupling your HTML, CSS, and JavaScript, check out this article.

$('.js-update').click(function(e) {
  var $btn = $(e.currentTarget);  
  var addClass = $btn.data('addclass');
  var removeClass = $btn.data('removeclass');
  var target = $btn.data('target');
  $(target).addClass(addClass).removeClass(removeClass);
})

.day {
  background: red;
}
.night {
  background: yellow;
}

.day .btn-day,
.night .btn-night {
  display: none;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="training.css">
    </head>
    <body class="day">
        <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <button class="js-update btn-day"type="button" name="button" data-target="body" data-addclass="day" data-removeclass="night">day</button>
        <button class="js-update btn-night" type="button" name="button" data-target="body" data-addclass="night" data-removeclass="day">night</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
        
    </body>
</html>

Answer 3

Answer №2

Make sure to declare your buttonText variable inside the event handler to ensure it gets updated properly, otherwise, it will retain its initial value throughout the script.

In addition, don't forget to include setting the text back to "day" in your else block.

$('button').click(function() {
  var buttonText = $('button').text();

  if (buttonText == 'day') {
    $('body').css({
      'background': 'red'
    })
    $('button').text('night');
  } else if (buttonText == 'night') {
    $('body').css({
      'background': 'yellow'
    });
    $('button').text('day');
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8>
  <title></title>
  <link rel="stylesheet" href="training.css">
</head>

<body>
  <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <button type="button" name="button">day</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
  <script src="training.js" charset="utf-8"></script>
</body>

</html>

Answer 4

Make sure to declare your buttonText variable inside the event handler to ensure it gets updated properly, otherwise, it will retain its initial value throughout the script.

In addition, don't forget to include setting the text back to "day" in your else block.

$('button').click(function() {
  var buttonText = $('button').text();

  if (buttonText == 'day') {
    $('body').css({
      'background': 'red'
    })
    $('button').text('night');
  } else if (buttonText == 'night') {
    $('body').css({
      'background': 'yellow'
    });
    $('button').text('day');
  }
})

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8>
  <title></title>
  <link rel="stylesheet" href="training.css">
</head>

<body>
  <p>velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <button type="button" name="button">day</button>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
  <script src="training.js" charset="utf-8"></script>
</body>

</html>

Answer 5

Answer №3

Transfer the text of the button into the method itself

$('button').click(function() {
    var buttonText= $('button').text();
        if (buttonText=='day') {
            $('body').css({
                'background':'red'
            })
        $('button').text('night');
    } else if (buttonText=='night') {
        $('body').css({
            'background':'yellow'
        }) 
    }
})

Answer 6

Transfer the text of the button into the method itself

$('button').click(function() {
    var buttonText= $('button').text();
        if (buttonText=='day') {
            $('body').css({
                'background':'red'
            })
        $('button').text('night');
    } else if (buttonText=='night') {
        $('body').css({
            'background':'yellow'
        }) 
    }
})

Answer 7

Answer №4

To achieve the desired functionality of changing the button text and background color, make sure to retrieve the button text within the click event handler every time a user clicks the button. This way, you can ensure that the button text is updated accordingly based on the current state.

$('button').click(function() { 
    var buttonText= $('button').text(); //get button text each time you click the button
    if (buttonText=='day') { 
        $('body').css({ 'background':'red' }) 
        $('button').text('night');
    } else if (buttonText=='night') { 
        $('body').css({ 'background':'yellow' }) 
    } 
})

Answer 8

To achieve the desired functionality of changing the button text and background color, make sure to retrieve the button text within the click event handler every time a user clicks the button. This way, you can ensure that the button text is updated accordingly based on the current state.

$('button').click(function() { 
    var buttonText= $('button').text(); //get button text each time you click the button
    if (buttonText=='day') { 
        $('body').css({ 'background':'red' }) 
        $('button').text('night');
    } else if (buttonText=='night') { 
        $('body').css({ 'background':'yellow' }) 
    } 
})

Click event doesn't trigger the 'else if' statement in jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the secret to remaining on the same spot even after the page is reloaded?

Calculation of time intervals based on input values from text boxes, calculating quarters of an hour

What is the best way to utilize JavaScript variables that are declared on index.html/index.jsp in Vue.js?

Google Chart Fails to Display

When attempting to use the $http get command, an error may occur due

Is it possible for an animation to complete even if it is stopped midway?

Angular UI Bootstrap Typeahead - Apply a class when the element is added to the document body

"Implementing conditional evaluation for pixel units in AngularJS using ng-style

Struggling with setting up a search bar for infinite scrolling content

Using jQuery to Create and Export XLS File

Restrict certain sections of the website to authorized users only

What could be causing the format to be incorrect?

Interactive feature on Google Maps information window allowing navigation to page's functions

Use flexbox to manage the width of containers and control the wrapping of elements

Utilizing React Classes Based on Conditions

The mysterious anomaly in Vue.js

Sort arrays in Javascript by their respective lengths

Visualizing data with a grouped bar chart in D3.js

What is the best way to update the amount input using Ajax?

What is the best way to access the "placeholder" configuration of a jQuery UI sortable?