有人可以告诉我为什么我的javascript点击不起作用吗？

时间：2016-11-16 02:10:00

标签： javascript html css json

每当我按下我的HTML文件中的按钮时，显示＆＃34;下一个Geocache＆＃34;，它就不起作用。它应该做的是从以JSON格式编写的数组中获取某些值，并将它们应用于＆＃39; target＆＃39;的顶部和左侧样式属性。 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

＆＃13;
＆＃13; 
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;
}
＆＃13;
＆＃13;
＆＃13; 

#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>

2 个答案:

答案 0 :(得分：0)

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

  • function interpolateU() {需要==＆gt; } 

  • var offSety = gps1.u;
    var

    你没有在var

    之后声明任何变量

    下面的代码段

    ＆＃13;
    ＆＃13; 
    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;
}
    ＆＃13; 
    #map {
  position: relative;
}
#target {
  position: absolute;
  top: 0px;
  left: 0px
}
#me {
  position: absolute;
  top: 0px;
  left: 0px;
}
    ＆＃13; 
    <!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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    • 答案 1 :(得分：0)

    • 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>

    相关问题
    最新问题