Issue changing global variable in JavaScript

Question

I am currently having a problem to change a global variable value in my JavaScript function. The code I am using is the following:

<script>
    var open = false;
    $('.header').click(function () {     
        $(this).find('span').text(function (_, value) { 
            alert(open); 
            if (open == false) { 
                $(this).addClass('fa fa-minus-circle'); 
                open == true; 
            } else {  
                $(this).addClass('fa fa-plus-circle'); 
                open == false; 
            } 
            /*return value == '+' ? '-' : '+' */ 
        });
        $(this).nextUntil('tr.header').slideToggle(100, function () {
        });
    });
</script>

I want to change the class of a span element everytime I click on it (open/close) however it only changes the class the first time and the global variable value always stay false.

I have tried to declare the global variable outside the function before the document is ready but still have the same issue. What am I doing wrong?

Btw, your code is overwriting the window.open method. Better use a local variable. — Bergi
– Bergi, Commented Dec 12, 2016 at 19:28
And .addClass does not do a replace, rather an append. You should use something like: $(this).removeClass('fa-minus-circle fa-plus-circle').addClass(...) — Wizard
– Wizard, Commented Dec 12, 2016 at 19:34

Community · Accepted Answer · 2017-05-23 12:33:48Z

When you use == or === you are comparing, for example open == true. Change it to assignment instead open = true and open = false.

I've incorporate @Bergi's and @Wizard's comments. In addition put class fa on the relevant html element. You don't have to add an remove it all the time.

// a module to make the open variable local
(function() {

  var open = false;
  $('.header').click(function() {
    $(this).find('span').text(function(_, value) {
      alert(open);
      if (open == false) {
         // remove plus before adding minus
        $(this).removeClass('fa-plus-circle')
          .addClass('fa-minus-circle');
        open = true; // change to assignment
      } else {
        // remove minus before adding plus
        $(this).removeClass('fa-minus-circle')
          .addClass('fa-plus-circle');
        open = false; // change to assignment
      } /*return value == '+' ? '-' : '+' */
    });
    $(this).nextUntil('tr.header').slideToggle(100, function() {});
  });

})();

Dennisrec · Accepted Answer · 2016-12-12 19:52:07Z

Please try this...
Also note that the "==" operator is mostly used to assign a new value to a variable.

<div class="header">
    <span></span>
</div>

<script>
    var open = false;
    $('.header').click(function () {
        $(this).find('span').text(function (_, value) {
            console.log(open);//better way to examine code

            if (!open) {
                $(this).addClass('fa fa-minus-circle');
                //open == true; This can only be used as a condition...
                open=true;//but here you re-assign a new property / value and then the variable changes

            } else {
                $(this).addClass('fa fa-plus-circle');
                //open == true; This can only be used as a condition...
                open=true;//but here you re-assign a new property / value and then the variable changes

            }

            //Perhaps you might also be interested in using tenary operators...
            !(open)?(function(e){
                open=true;
                $(e).addClass('fa fa-minus-circle');
            })($(this)):(function(){
                open=true;
                $(e).addClass('fa fa-minus-circle');
            })($(this));

        });
        $(this).nextUntil('tr.header').slideToggle(100, function () {

        });
    });
</script>

Collectives™ on Stack Overflow

Issue changing global variable in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related