Creating an if/else Statement so Page Changes Based on Cursor Value

I'm creating a gardening game for kids. The user clicks on the gardening tool (e.g. shovel) they need and then they click on the background image of the field which will take them to the next step/page (e.g. background image of plowed field). The javascript function that changes the cursor to the image of the tool works fine. However, I notice the background image changes on any click which is not what I want. It should only change when the cursor has the right value (i.e. shovel).

To resolve this problem, I thought it might be best to use a second function in the form of an if/else statement.

<script>
 function myFunction() {

  document.body.style.cursor = "url(img/Shovel.png), pointer";

}

function changePage() {
  var cursor = document.body.style.cursor;

  if (cursor === "url(img/Shovel.png)") {
    window.location.href = "Potato1.html";
  } else {
    window.location.href = "Potato0.html";
  }
}

It's not working as I thought it would, the page automatically changes to the next one. I'm wondering if my logic makes sense so I would appreciate some guidance.