Как заставить винтик вращаться по нажатию кнопки, а затем принимать, если щелкнуть установленное количество раз?

Question

Я пытаюсь создать базовую головоломку с вращающимся винтиком (только с одним винтиком).Шестерня вращается на 90 градусов каждый раз, когда нажимается.Есть отдельная кнопка для ввода этого ответа, чтобы проверить правильность.Если винтик повернут в неправильное положение и нажата кнопка, то пользователь возвращается к предыдущему URL.Если шестеренка повернута в правильное положение, то кнопка нажата, местоположение меняется на второй URL.

Я пытаюсь объединить функцию clickCount с кодом, чтобы вращать винтики при каждом щелчке.Таким образом, он будет как вращать винтик, так и добавлять / считать клики (начиная со значения 2), поэтому при нажатии кнопки будет выполняться либо случай 1 (если число кликов кратно 4), либо случай 2 (есликлики не кратны 4).Но я даже не могу заставить винтик вращаться один раз.По какой-то причине он создает вторую шестерню, а не позволяет мне щелкать / поворачивать основной.

Если кто-то может помочь мне только с вращающейся деталью, тогда я создам новый вопрос для бита clickCount, поскольку каждая деталь - это отдельная отдельная проблема.Но я включил это здесь для справки.

$('input').click(function() { //* When user clicks on first image //
  var img = document.getElementById("innercog"); // *select second img which is id "innercog" //
  if (img.hasClass('north')) { //* if second image has class "north", rotate... and so on *//
    img.attr('class', 'west');
  } else if (img.hasClass('west')) {
    img.attr('class', 'south');
  } else if (img.hasClass('south')) {
    img.attr('class', 'east');
  } else if (img.hasClass('east')) {
    img.attr('class', 'north');
  }
});

// Counts the number of times cog is clicked and stores it as n 
var clickCount = 2;

function clickHandler() {
  clickCount + 1; /* start with value of 2 and add 1 each time cog is rotated/clicked */
  missing code here /* Store clickCount value as n */
}

// When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct 
jQuery(document).ready(function() {
  $('#multiclick').click(function() {
    multiclick();
  });
});

var clickedCount = n; /* pull this value from the above function */

function multiclick() {
  if (clickedCount == multiple of 4) {
    window.location.href = "entranceroom.html";
  } else {
    window.location.href = "maindoor.html"; /* go to next page */
  }
}

.north {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  /* Safari / Chrome */
}

.west {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
}

.south {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  /* Safari and Chrome */
}

.east {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
}

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" div class="toshow" style="display:none;">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" onclick="clickHandler()" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div id="tryunlock" style="position:relative;top:41px;left:311px">
    <button type=button onclick="multiclick()" alt="" style="width:97px; height:97px; border:0; background-color:red;" /> </button>
  </div>

Answer 1

Я постараюсь выяснить, понял ли я

1. if (clickedCount%4===0), кратное 4

2. Будьте последовательны - у вас естьвстроенный клик и обработчик кликов, но имеют слишком общий щелчок на любом входе

3. Ваш HTML был недействителен, тег кнопки был закрыт слишком рано, и все это отображалось: нет

var directions = ["north", "west", "south", "east"],
  clickedCount = 0;
$(function() { // on page load
  $('#innercog').click(function() { //* When user clicks on first image //
    $(this).removeClass(directions[clickedCount % 4]);
    clickedCount++; // we do not reset, just keep adding
    $(this).addClass(directions[clickedCount % 4]);
    console.log(clickedCount,directions[clickedCount % 4]);
  });

  // When tryunlock button is clicked, checks if stored clicks value is a multiple of 4 and navigates to one of the two urls depending if correct 
  $("#tryunlock").on("click", function() {
    if (clickedCount % 4 === 0) {
      console.log(clickedCount,"Entrance"); // remove the next comment when happy
      // window.location.href = "entranceroom.html";
    } else {
      console.log(clickedCount,"maindoor"); // remove the next comment when happy
      // window.location.href = "maindoor.html"; /* go to next page */
    }
  });
});

.north {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  /* Safari / Chrome */
}

.west {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  /* Safari and Chrome */
}

.south {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  /* Safari and Chrome */
}

.east {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  /* Safari and Chrome */
}

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<div id="wrapper" class="toshow">
  <!-- div class added for fade in content -->
  <div style="position:relative;top:0px;left:0px;">
    <img src="doorpuzzle1b.png" style="position:absolute" width="980" height="650" alt="Maindoor" />
  </div>

  <!-- Button to return to main door -->
  <div id="enterbutton" style="position:relative;top:260px;left:20px">
    <a href="maindoor.html"><img src="cogarrowleft.png" alt="Courtyard" width=97 height=97 border=0></a>
  </div>

  <!-- Button to rotate cog -->
  <div style="position:relative;top:41px;left:311px">
    <img class="north" id="innercog" src="innercog.png" width=370 height=370 border=0><input type="image" src="innercog.png">
  </div>

  <!-- Button to try unlocking door cog -->
  <div style="position:relative;top:41px;left:311px">
    <button id="tryunlock" type="button" style="width:97px; height:97px; border:0; background-color:red;">Open</button>
  </div>
</div>