Создание оператора if/else, чтобы изменения страницы основывались на значении курсора

Question

Я создаю игру в садоводство для детей. Пользователь нажимает на нужный ему садовый инструмент (например, лопату), а затем нажимает на фоновое изображение поля, которое приведет его к следующему шагу / странице (например, фоновое изображение вспаханного поля). Функция javascript, которая меняет курсор на изображение инструмента, работает нормально. Тем не менее, я замечаю, что фоновое изображение меняется при любом щелчке, что не то, что я хочу. Он должен изменяться только тогда, когда курсор имеет правильное значение (например, лопатка).

Чтобы решить эту проблему, я подумал, что лучше всего использовать вторую функцию в форме оператора if / else.

<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";
  }
}

Это работает не так, как я думал, страница автоматически переключается на следующую. Мне интересно, если моя логика имеет смысл, поэтому я был бы признателен за некоторые рекомендации.

Answer 1

Следующее будет отображать положение последней скрытой рамки всякий раз, когда вы нажимаете:

var current = undefined;

document.body.addEventListener('click', fn, true);

$('#topLeft').hover(function(){
  current = 'topLeft'
})
$('#topRight').hover(function(){
  current = 'topRight'
})
$('#bottomLeft').hover(function(){
  current = 'bottomLeft'
})
$('#bottomRight').hover(function(){
  current = 'bottomRight'
})

function fn(){
  console.log(current)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:100px; height:100px;">
  <input id="topLeft" style="width:30px; height: 30px; background-color:green;" />
  <input id="topRight" style="width:30px; height: 30px; background-color:red;" />
  <input id="bottomLeft" style="width:30px; height: 30px; background-color:yellow;" />
  <input id="bottomRight" style="width:30px; height: 30px; background-color:blue;" />
</div>

Для вашей конкретной проблемы просто устанавливайте переменную всякий раз, когда кто-то нажимает на инструмент:

$('#shovel').click(function(){
    current = 'shovel'
})

затем проверьте переменную при нажатии на почву

$('#soil').click(function(){
    if(current === 'shovel')
        [whatever]
    else
        [whatever 2]
})

---

Замечания:

Вы устанавливаете курсор как "url(img/Shovel.png), pointer" а затем сравнивая его с "url(img/Shovel.png)", Вы пытались отладить значение cursor с этой точки зрения?

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

console.log(document.body.style.cursor) // url("img/Shovel.png"), pointer

var result = (document.body.style.cursor === "url(\"img/Shovel.png\")")

console.log(result) // false

result = (document.body.style.cursor === "pointer")

console.log(result) // false

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

console.log(result) // true