Question

我正在尝试创建一个代码，如果您单击屏幕（地图）上某个位置的特定部分，将返回地图的位置以及附近的最近餐馆。

但是显然，我的eventListener实现无法正常工作。

这是我的myinfo.ejs。

<link rel="stylesheet" href="/views/style.css">
    <link rel=stylesheet href="../views/myinfo.css"  />
    <div class="basic">
        <div class="photo"><img class="photo1" src="../images/profile/<%= session.image%></div>

    <div class="photo">
        </div>
    <div class="intro">
        ID: <% for (var i = 0; i < 5; i++) { %> 
            &nbsp <% } %> 
        <span class="intronb"><%= session.user %> </span> <br /> <br />
        이름: <% for (var i = 0; i < 5; i++) { %> 
            &nbsp <% } %> <span class="intronb"><%= session.name %></span>

    </div>
     <div class="group">
        <div class="visited">
        이번 달 방문한 횟수는
        </div>
        <div class="rank">
        등수.
        </div>
        <div class="favourite">
        한식.
        </div>
     </div>

    <div class="displaytext">
        선택된 음식점:  <div class="rt"></div>
    </div>

      <div class="map">
          ABadfafasf
      </div>
           <script src="../views/click.js"> </script>   



    </div>
</html>

这是我的JavaScript代码。 click.js。

let clickArea = document.querySelector('.map');
console.log("hi" + clickArea); //this Works. returns hi[object HTMLDivElement] but the problem is that getClickPosition seems like it doesn't run. or maybe clickArea.addEventListener.

let rtname = document.querySelector('.rt');

clickArea.addEventListener("click", getClickPosition, false);

function getClickPosition(e) {
    var xpos= e.clientX;
    var ypos = e.clientY;
    console.log(xpos + " " + ypos);

    var restaurants = [["chicken", [500, 600]]];

    for (var i = 0; i < restaurants.length; i++) {
        if (abs(xpos - restaurants[i][1][0]) < 5 && abs(ypos - restaurants[i][1][0] < 5)) {
            rtname.innerHTML = restaurants[i][0];
        }
    }
}

已将地图大小更改为整个屏幕，以检查它是否是div的大小，但仍然无法正常工作。我该如何解决？

Eventlistener单击不适用于ejs文件

0 个答案: