change the value of variable while toggling on button click

Question

I want to change the value of a variable while toggling a button. Based on this I want to toggle the rotation of an icon via CSS

// this is the variable I want to change 
var flag;

$(".outer_rotate_aero").click(function() {
  $(".outer_rotate_aero_fa1").toggleClass("down");
  flag = false;

  $(".rotate_aero1").click(function() {
    flag = true;
    $(".fa2").toggleClass("down");
  });

  // I want to toggle a class containing a icon (ie rotate)
  if (flag == true) {
    $(".fa2").toggleClass("down");
  }
});

It seems like you've overcomplicated this with nested event handlers and global flags. All you need is to call toggleClass() within a single click handler. — Rory McCrossan
– Rory McCrossan, Commented Jun 12, 2019 at 10:55
That is way to imperative... And nested event listeners is bad practice. You are binding event listener for $(".rotate_aero1") click event each time you click on $(".outer_rotate_aero"). And use .on('click', handler) not click(); — Victor
– Victor, Commented Jun 12, 2019 at 11:32

adel · Accepted Answer · 2019-06-12 11:12:22Z

2

var rotate = true;
 $("div").html("rotate(0)")
$("div").click(function(){
  rotate? $(this).html("rotate(180deg)"):$(this).html("rotate(0)")
  $(this).toggleClass("down");
    rotate=!rotate
})

div{
position:absolute;
left:50%;
top:50%;
  background-color:red;
  width:100px;
  height:100px;
  transition: transform 1s;
  transform:translate(-50% , -50%);
}
div.down{
transform: translate(-50% , -50%) rotate(180deg) 
}

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

maybe like this!

answered Jun 12, 2019 at 11:12

adel

3,5051 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Soni · Accepted Answer · 2019-06-12 11:15:58Z

0


// this is the variable I want to change 
var flag;

$(".outer_rotate_aero").click(function() {
  $(".outer_rotate_aero_fa1").toggleClass("down");
  flag = false;
});

// Event handlers should not be nested
$(".rotate_aero1").click(function() {
  flag = true;
  $(".fa2").toggleClass("down");
});

/* No need for this block as flag turns true only on click of '.rotate_aero1'
  if (flag == true) {
    $(".fa2").toggleClass("down");
  }
*/

I hope this answers!

answered Jun 12, 2019 at 11:15

Rahul Soni

4105 silver badges19 bronze badges

Comments

csalmeida · Accepted Answer · 2019-06-12 11:18:22Z

You could set the value of the variable to be the opposite of what it is and use toggle class on click. (see example)

var rotate = true;

$("span").click(function() {
 // Add or remove class.
 $(this).toggleClass("rotate-down");
 // Updates variable.
 rotate = !rotate;
});

/* These styles are only to make the rotation more pronounced. */
section {
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 100px 0;
}

span {
  display: block;
  font-size: 30px;
  width: 60px;
  height: 60px;
  padding: 10px;
  border-radius: 50%;
  background: hotpink;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease-in-out;
}

/* This is the classed being toggled by jQuery. */
.rotate-down {
  transform: rotate(180deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Example element acting as icon. -->
<section>
  <span>🎉</span>
</section>

sidrao2006 · Accepted Answer · 2019-06-12 11:04:13Z

-1

Give javascript onclick to button and then don't toggle variables...use this code

<img src=" // your image " id="img">
<img src=" // your rotated image " id="imgRotated">

<button onclick="myfn()">Click to rotate</button>

<script>
function myfn(){
document.getElementById("img").style.display = "none";
document.getElementById("imgRotated").style.display = "block";
}
</script>

I hope that helps

answered Jun 12, 2019 at 11:04

sidrao2006

1,3382 gold badges15 silver badges34 bronze badges

Collectives™ on Stack Overflow

change the value of variable while toggling on button click

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related