Заполните поле ввода через область карты изображения

Question

Я делаю приложение, которое заполняет счет для игрока, который играет в игру в реальной жизни. Зритель следит за своим счетом, нажимая на то, что он делал в каждом ходу. Я столкнулся с двумя проблемами:

• Как мне заполнить поля ввода, нажав на область.
• Как мне перейти от поворота 1 к повороту 2 и т. Д.

Изображение отображается в четыре сектора

Это сценарий: (у меня было предупреждение ('test'); на месте ???, но это тоже не сработало.)

$("#test").on("click", function(e) {
  e.preventDefault();
  console.log("here");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>

Answer 1

Почти там - вам нужно jQuerify цели:

var cnt = 0;
$("#map").on("click", function(e) {
  e.preventDefault();
  cnt++;
  if (cnt > 3) {
    alert("You had your 3 gos");
  }  
  else {
    var $tgt = $(e.target);
    // console.log($tgt.attr("alt"));
    $("#turn"+cnt).val($tgt.attr("title"))
  }  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="goal" src="http://pngimg.com/uploads/football_goal/football_goal_PNG24.png" usemap="#goal-map">

<map name="goal-map" id="map">
        <area id="test" href="#" alt="300 points" title="300" coords="483,50,584,146" shape="rect" />
        <area class="a" href="" alt="300 points" title="300" coords="110,49,11,145" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="13,148,110,238" shape="rect" />
        <area class="a" href="" alt="200 points" title="200" coords="484,149,584,237" shape="rect" />
    </map> 
    <br/>
    
This is the input field that needs to be filled:

<p>Turn 1:
  <input type="text" id="turn1"></p>
<p>Turn 2:
  <input type="text" id="turn2"></p>
<p>Turn 3:
  <input type="text" id="turn3"></p>