有人能告诉我为什么我的javascript点击不起作用吗？答案

【问题标题】：Can someone tell me why my javascript click isnt working?有人能告诉我为什么我的javascript点击不起作用吗？
【发布时间】：2016-11-16 10:58:03
【问题描述】：

每次我在我的 HTML 文件中按下“下一个 Geocache”按钮时，它都不起作用。它应该做的是从以 JSON 格式编写的数组中获取某些值，并将它们应用于 HTML 中“目标”div 的顶部和左侧样式属性，其中包含一个黑色小方块的图像。 u/v 值应该是我在下面发布的照片上像素的 x/y 值。该按钮应该在每次单击时遍历每个数组对象，并在到达并显示最后一个元素时循环到第一个元素。我已经尝试了所有方法，请帮助！

image of the area of the gps where the div is supposed to update on

the image that's in the target div in the HTML

window.onload = function() {
  document.getElementById("togglegps").onclick = togglegps;
  document.getElementById("update").onclick = updateCache;
}

var id = null;
var firstTime = -1;

var loc1 = {lat: 43.773488, lon: -79.506507, v: 294, u: 299, desc: "Top right corner of building 15"};
var loc2 = {lat: 43.774472, lon: -79.507444, v: 199, u: 282, desc: "Top right corner of building 90"};
var loc3 = {lat: 43.774841, lon: -79.500962, v: 289, u: 628, desc: "Top right corner of building 24"};
var caches = new Array();
caches[0] = loc1;
caches[1] = loc2;
caches[2] = loc3;
var currentCache = 0;


function updateCache() {
  if (currentCache <= caches.length) {
    caches[currentCache++];
    showCache();
  }
  else if(currentCache > caches.length) {
    currentCache = 0;
    showCache();
  }
}

function showCache() {
  var target = document.getElementById("target");
  target.style.top = caches[currentCache].v;
  target.style.left = caches[currentCache].u;
}


function togglegps() {
    var button = document.getElementById("togglegps");
    if (navigator.geolocation) {
        if (id === null) {
            id = navigator.geolocation.watchPosition(showPosition, handleError, {enableHighAccuracy : true, timeout: 1000});
            button.innerHTML = "STOP GPS";
            firstTime = -1;
        } else {
            navigator.geolocation.clearWatch(id);
            id = null;
            button.innerHTML = "START GPS";
        }
    } else {
        alert("NO GPS AVAILABLE");
    }
}

function handleError(error) {
    var errorstr = "Really unknown error";
    switch (error.code) {
    case error.PERMISSION_DENIED:
        errorstr = "Permission deined";
        break;
    case error.POSITION_UNAVAILABLE:
        errorstr = "Permission unavailable";
        break;
    case error.TIMEOUT:
        errorstr = "Timeout";
        break;
    case error.UNKNOWN_ERROR:
        error = "Unknown error";
        break;
    }
    alert("GPS error " + error);
}

function showPosition(position) {
    var latitude = document.getElementById("latitude");
    var longitude = document.getElementById("longitude");
    var now = document.getElementById("now");

    latitude.innerHTML = position.coords.latitude;
    longitude.innerHTML = position.coords.longitude;
    if (firstTime < 0) {
      firstTime = position.timestamp;
    }
    now.innerHTML = position.timestamp - firstTime;

    //var gps1 = {lat: 43.774570, long: -79.510475, v: 130, u: 143};
    //var gps2 = {lat: 43.773404, long: -79.499578, v: 665, u: 399};
    var gps1 = {lat: 43.7746309, long: -79.5104764, v: 130, u: 143};
    var gps2 = {lat: 43.7735501, long: -79.4995539, v: 665, u: 399};
    var gpsi = {lat: position.coords.latitude, long: position.coords.longitude};

    function interpolateU() {
      var u_i = gps1.u + (gps2.u - gps1.u)*(gpsi.long - gps1.long)/(gps2.long - gps1.long);
      return u_i;
    }

    function interpolateV(){
      var v_i = gps1.v + (gps2.v - gps1.v)*(gpsi.lat - gps1.lat)/(gps2.lat - gps1.lat);
      return v_i;
    }

    var ui = interpolateU();
    var vi = interpolateV();

    var debug = document.getElementById("debug");
    debug.innerHTML = "(" + Math.round(vi) + ", " + Math.round(ui) + ")";

    var x = vi;
    var y = ui;
    var me = document.getElementById("me");

    me.style.top = y;
    me.style.left = x;
}

#map {
  position: relative;
}
#target {
  position: absolute;
  top: 0px;
  left: 0px
}
#me {
  position: absolute;
  top: 0px;
  left: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="gps.js"></script>
  <link href="gps.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Geocaching</h1>
  <div id="map">
    <img id="map" src="campus_map.png" alt="Campus Map">
    <div id="target">
      <img src="target.gif" alt="Target">
    </div>
    <div id="me">
      <img src="me.gif" alt="Me">
    </div>
  </div>
  <p>
    <button id="togglegps">Start GPS</button>
    <button id="update">Next Geocache</button>
    Lattitude <span id="latitude"> ???? </span>
    Longitude <span id="longitude"> ???? </span>
    Now <span id="now"> ???? </span>
  </p>
  <p>
    <div id="debug">debug</div>
  </p>
</body>

</html>

【问题讨论】：

你知道这是怎么回事吗？: "message": "SyntaxError: missing variable name", "filename": "stacksnippets.net/js", "lineno": 169, "colno": 4
你打错了...onlclick应该是onclick
感谢您指出这一点！但程序仍然无法运行
请查看How to Ask 并将其更新为minimal reproducible example（强调最小）。目前，您拥有的是工作订单，而不是问题。
* 不是调试代码的地方！您需要具体说明您遇到的问题，而不是复制/粘贴您的整个代码并期望社区为您调试它。正如@zzzzBov 所建议的，请在发布问题之前阅读How to Ask。

标签： javascript html css json

【解决方案1】：

您的 JavaScript 代码底部被截断。
我还增强了updateCache() 中的逻辑，以便循环遍历缓存列表没有错误。
您不能使用window.caches，因为it is a browser feature。
我也在加载时调用showCache()，因为我认为这是有道理的。
任何其他修改都保留为为读者练习。

window.onload = function() {
  document.getElementById("togglegps").onclick = togglegps;
  document.getElementById("update").onclick = updateCache;
}

var id = null;
var firstTime = -1;

var loc1 = {
  lat: 43.773488,
  lon: -79.506507,
  v: 294,
  u: 299,
  desc: "Top right corner of building 15"
};
var loc2 = {
  lat: 43.774472,
  lon: -79.507444,
  v: 199,
  u: 282,
  desc: "Top right corner of building 90"
};
var loc3 = {
  lat: 43.774841,
  lon: -79.500962,
  v: 289,
  u: 628,
  desc: "Top right corner of building 24"
};
var _caches = new Array();
_caches[0] = loc1;
_caches[1] = loc2;
_caches[2] = loc3;
var currentCache = 0;


function updateCache() {
  if (currentCache >= _caches.length - 1) {
    currentCache = 0;
    showCache();
  } else if (currentCache < _caches.length - 1) {
    currentCache++;
    showCache();
  }
}

function showCache() {
  console.log('showing cache ' + _caches[currentCache].desc);
  var target = document.getElementById("target");
  target.style.top = _caches[currentCache].u;
  target.style.left = _caches[currentCache].v;
}


function togglegps() {
  var button = document.getElementById("togglegps");
  if (navigator.geolocation) {
    if (id === null) {
      id = navigator.geolocation.watchPosition(showPosition, handleError, {
        enableHighAccuracy: true,
        timeout: 1000
      });
      button.innerHTML = "STOP GPS";
      firstTime = -1;
    } else {
      navigator.geolocation.clearWatch(id);
      id = null;
      button.innerHTML = "START GPS";
    }
  } else {
    alert("NO GPS AVAILABLE");
  }
}

function handleError(error) {
  var errorstr = "Really unknown error";
  switch (error.code) {
    case error.PERMISSION_DENIED:
      errorstr = "Permission deined";
      break;
    case error.POSITION_UNAVAILABLE:
      errorstr = "Permission unavailable";
      break;
    case error.TIMEOUT:
      errorstr = "Timeout";
      break;
    case error.UNKNOWN_ERROR:
      error = "Unknown error";
      break;
  }
  alert("GPS error " + error);
}

function showPosition(position) {
  var latitude = document.getElementById("latitude");
  var longitude = document.getElementById("longitude");
  var now = document.getElementById("now");

  latitude.innerHTML = position.coords.latitude;
  longitude.innerHTML = position.coords.longitude;
  if (firstTime < 0) {
    firstTime = position.timestamp;
  }
  now.innerHTML = position.timestamp - firstTime;

  //var gps1 = {lat: 43.774570, long: -79.510475, v: 130, u: 143};
  //var gps2 = {lat: 43.773404, long: -79.499578, v: 665, u: 399};
  var gps1 = {
    lat: 43.7746309,
    long: -79.5104764,
    v: 130,
    u: 143
  };
  var gps2 = {
    lat: 43.7735501,
    long: -79.4995539,
    v: 665,
    u: 399
  };
  var gpsi = {
    lat: position.coords.latitude,
    long: position.coords.longitude
  };

  function interpolateU() {
    var u_i = gps1.u + (((gps2.u - gps1.u)) * ((gpsi.long - gps1.long) / (gps2.long - gps1.long)));
    return u_i;
  }

  function interpolateV() {
    var v_i = gps1.v + (((gps2.v - gps1.v)) * ((gpsi.lat - gps1.lat) / (gps2.lat - gps1.lat)));
    return v_i;
  }

  var ui = interpolateU();
  var vi = interpolateV();

  var debug = document.getElementById("debug");
  debug.innerHTML = "(" + Math.round(vi) + ", " + Math.round(ui) + ")";

  var x = vi;
  var y = ui;
  var me = document.getElementById("me");

  me.style.top = y;
  me.style.left = x;
}

showCache();

#map {
  position: relative;
}
#target {
  position: absolute;
  top: 0px;
  left: 0px
}
#me {
  position: absolute;
  top: 0px;
  left: 0px;
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Geocaching</h1>
  <div id="map">
    <img id="map" src="campus_map.png" alt="Campus Map">
    <div id="target">
      <img src="target.gif" alt="Target">
    </div>
    <div id="me">
      <img src="me.gif" alt="Me">
    </div>
  </div>
  <p>
    <button id="togglegps">Start GPS</button>
    <button id="update">Next Geocache</button>
    Lattitude <span id="latitude"> ???? </span>
    Longitude <span id="longitude"> ???? </span>
    Now <span id="now"> ???? </span>
  </p>
  <p>
    <div id="debug">debug</div>
  </p>
</body>

</html>

【讨论】：

很抱歉问这个问题，但我可以更新代码，让它不再被切断，你能看看并告诉我有什么问题，以便我修复它吗？
我更新了答案中的 JavaScript，因此最后几行与您的相符。它应该仍然以相同的方式工作。
感谢您今天提供的所有帮助，丹。老实说，当我问这个问题时，我知道这基本上是要求人们为我做这项工作。我只是问，因为我没有选择。我不确定为什么我的程序可以正常工作，而在线验证器根本没有帮助我。我真的很抱歉我问了这个问题，但是对于它的价值来说，这是一个很大的帮助！谢谢你所做的一切。

【解决方案2】：

除了onclick 错字之外的两个错误：

function interpolateU() { 需要 ==> }

var offSety = gps1.u;
    var

var之后你没有声明任何变量

下面的片段

window.onload = function() {
  document.getElementById("togglegps").onclick = togglegps;
  document.getElementById("update").onclick = updateCache;
}

var id = null;
var firstTime = -1;

var loc1 = {
  lat: 43.773488,
  lon: -79.506507,
  v: 294,
  u: 299,
  desc: "Top right corner of building 15"
};
var loc2 = {
  lat: 43.774472,
  lon: -79.507444,
  v: 199,
  u: 282,
  desc: "Top right corner of building 90"
};
var loc3 = {
  lat: 43.774841,
  lon: -79.500962,
  v: 289,
  u: 628,
  desc: "Top right corner of building 24"
};
var caches = new Array();
caches[0] = loc1;
caches[1] = loc2;
caches[2] = loc3;
var currentCache = 0;


function updateCache() {
  if (currentCache <= caches.length) {
    caches[currentCache++];
    showCache();
  } else if (currentCache > caches.length) {
    currentCache = 0;
    showCache();
  }
}

function showCache() {
  var target = document.getElementById("target");
  target.style.top = caches[currentCache].u;
  target.style.left = caches[currentCache].v;
}


function togglegps() {
  var button = document.getElementById("togglegps");
  if (navigator.geolocation) {
    if (id === null) {
      id = navigator.geolocation.watchPosition(showPosition, handleError, {
        enableHighAccuracy: true,
        timeout: 1000
      });
      button.innerHTML = "STOP GPS";
      firstTime = -1;
    } else {
      navigator.geolocation.clearWatch(id);
      id = null;
      button.innerHTML = "START GPS";
    }
  } else {
    alert("NO GPS AVAILABLE");
  }
}

function handleError(error) {
  var errorstr = "Really unknown error";
  switch (error.code) {
    case error.PERMISSION_DENIED:
      errorstr = "Permission deined";
      break;
    case error.POSITION_UNAVAILABLE:
      errorstr = "Permission unavailable";
      break;
    case error.TIMEOUT:
      errorstr = "Timeout";
      break;
    case error.UNKNOWN_ERROR:
      error = "Unknown error";
      break;
  }
  alert("GPS error " + error);
}

function showPosition(position) {
  var latitude = document.getElementById("latitude");
  var longitude = document.getElementById("longitude");
  var now = document.getElementById("now");

  latitude.innerHTML = position.coords.latitude;
  longitude.innerHTML = position.coords.longitude;
  if (firstTime < 0) {
    firstTime = position.timestamp;
  }
  now.innerHTML = position.timestamp - firstTime;

  //var gps1 = {lat: 43.774570, long: -79.510475, v: 130, u: 143};
  //var gps2 = {lat: 43.773404, long: -79.499578, v: 665, u: 399};
  var gps1 = {
    lat: 43.7746309,
    long: -79.5104764,
    v: 130,
    u: 143
  };
  var gps2 = {
    lat: 43.7735501,
    long: -79.4995539,
    v: 665,
    u: 399
  };
  var gpsi = {
    lat: position.coords.latitude,
    long: position.coords.longitude
  };

  function interpolateU() {
    var u_i = gps1.u + (((gps2.u - gps1.u)) * ((gpsi.long - gps1.long) / (gps2.long - gps1.long)));
    return u_i;
  }

  function interpolateV() {
    var v_i = gps1.v + (((gps2.v - gps1.v)) * ((gpsi.lat - gps1.lat) / (gps2.lat - gps1.lat)));
    return v_i;
  }

  var ui = interpolateU();
  var vi = interpolateV();

  var debug = document.getElementById("debug");
  debug.innerHTML = "(" + Math.round(vi) + ", " + Math.round(ui) + ")";

  var x = vi;
  var y = ui;
  var me = document.getElementById("me");
  var offSety = gps1.u;
}

#map {
  position: relative;
}
#target {
  position: absolute;
  top: 0px;
  left: 0px
}
#me {
  position: absolute;
  top: 0px;
  left: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="gps.js"></script>
  <link href="gps.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1>Geocaching</h1>
  <div id="map">
    <img id="map" src="campus_map.png" alt="Campus Map">
    <div id="target">
      <img src="target.gif" alt="Target">
    </div>
    <div id="me">
      <img src="me.gif" alt="Me">
    </div>
  </div>
  <p>
    <button id="togglegps">Start GPS</button>
    <button id="update">Next Geocache</button>
    Lattitude <span id="latitude"> ???? </span>
    Longitude <span id="longitude"> ???? </span>
    Now <span id="now"> ???? </span>
  </p>
  <p>
    <div id="debug">debug</div>
  </p>
</body>

【讨论】：