How to get a clickcount function to begin on number other than 0

Question

I have an image that rotates and counts clicks at the same time. The user must rotate the image into the correct position and then submit this answer to move on to the next page. Depending on the total number of clicks on the first image (checked via a clickedcount function), clicking on a second button will navigate to one of two urls.

I've got the image to rotate on click using CSS transform. I've also got a clickedcount function that counts the number of clicks and then the second button responds correctly navigating to one of the urls depending on that total. However, I need to start the count on 2, not 0, as that is the first correct image position. Then every full rotation after that (a multiple of 4) will also be accepted as correct. So clickcount totals of 2, then 6, 10, 14, 18, 22, and so on.

Changing the starting clickedcount value in the first function does result in the above correct totals being accepted. However, it also rotates the image an extra 2 times on the first click (which it shouldn't). I'm guessing I need to amend the 'if (clickedCount % 4 === 0)' bit to effectively add 2 to the starting total, but so far all the variations I've tried haven't worked.

So far the closest I've got is:

'if (clickedCount = 2 || 2 + (% 4 === 0))'

if the clickedcount is equal to 2 OR 2 + a multiple of 4

But it doesn't accept that at all (stops rotating entirely). I'm not sure where I'm going wrong here! I'm new to javascript, so probably missing something very very obvious : (

JS:

<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>
<script>
// Rotate cog when clicked
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++; // 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,"Entranceroom");
    window.location.href = "entranceroom.html";
    } else {
    console.log(clickedCount,"maindoor");
    window.location.href = "maindoor.html"; /* go to next page */
    }
});
});
</script>

CSS:

.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 */
}

Answer 1

just change the line of code

 clickedCount = 0;

to

  clickedCount  = 2;

New Code:

<script>
// Rotate cog when clicked
   var directions = ["north", "west", "south", "east"],
    clickedCount = 2;
     ....

As for the comparison statement mentioned in the OP

it would be

if ((clickedCount == 2) || (((clickedCount + 2) % 4) == 0)) 

---

A different way to do things:

Using javascript's style property, you can directly modify any object's transform element.

Combined with a few custom attributes, you can set up a series of locks without writing a bunch of repeating code.

function rotateLock(image) {

  // create the rotation and clicks properties attached to the div
  var cl = document.createAttribute("clicks");

  var clrot = document.createAttribute("rotation");


  // increase 'clicks' by 1
  cl.value += 1;
  image.attributes.setNamedItem(cl);


  // increase rotation by 90
  clrot.value = Number(image.attributes.getNamedItem("rotation").value) + 90;
  while (clrot.value > 360) { clrot.value -= 360; }
  image.attributes.setNamedItem(clrot);


  // set transform 
  image.style.transform = "rotate(" + image.attributes.getNamedItem("rotation").value + "deg)";


  // check if rotation matches  the 'endRotation' value annd 'clicks' is > 0
  if ((cl.value > 0) && (clrot.value ==  image.attributes.getNamedItem("endRotation").value)) {
  image.innerHTML = "<br><br><p style='color: white'>UNLOCKED!</p><br><br>";
    

  } else {
  
  image.innerHTML = "<br><br>LOCKED!<br><br>";
    
  }
}

<DOCTYPE html>

<table><tr><td>  <div id="imageLock" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="360" onClick="rotateLock(document.getElementById('imageLock'));">
<center>
   LOCKED
    </center>
  </div>
</td><td>
  <div id="imageLock2" style="transform: rotate(90deg); width: 150px; height: 150px; background-color: green; border-radius: 30px 30px 30px 30px" clicks="0" rotation=0 endRotation="180" onClick="rotateLock(document.getElementById('imageLock2'));">
  <p><center>
   LOCKED
    </center></p>
  </div>
</td></tr></table>

The advantage of using this approach is that you can create as many locks as you want, each with different settings without having to re-code the entire script logic.

Not sure how much this will help... but it might help someone one day.