CODEWITHSUNDEEP
htmlcss
Soccerlife
Soccerlife

Reputation: 751

If-statement for rotation in Javascript

I'm working on a changing rotation when I click on a div. Why doesn't my div rotate when I click on the div? Is there something wrong with the if-statement?

function blog() {

  var i = document.getElementById('imgblog').style.transform;

  if (i == "rotate(180deg)") {
    document.getElementById('imgblog').style.transform == "rotate(0deg)";
  } else {
    document.getElementById('imgblog').style.transform == "rotate(180deg)";
  }
}
#option #imgblog {
  height: 20px;
  transform: rotate(180deg);
  transition: 0.3s;
  margin-top: 1px;
  float: right;
}
<div id="option" onclick="blog()">
  <img id="imgblog" src="https://upload.wikimedia.org/wikipedia/commons/3/35/Arrow_facing_right_-_Red.svg">
  <h1> BLOG </h1>
</div>

Upvotes: 0

Views: 558

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Simplified your code to toggle a class that triggers the rotate instead.

#option #imgblog {
  height: 20px;
  transform: rotate(180deg);
  transition: 0.3s;
  margin-top: 1px;
  float: right;
}

#option #imgblog.norotate {
  transform: rotate(0);
}
<div id="option" onclick="blog()">
  <img id="imgblog" src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <h1> BLOG </h1>
</div>
<script>
  function blog() {
    var i = document.getElementById('imgblog');
    i.classList.toggle('norotate');
  }
</script>

Upvotes: 2

Related Questions