Artemis Artemis - 25 days ago 5
CSS Question

Can someone tell me why my javascript click isnt working?

Every time I press the button on in my HTML file that says "next Geocache", it doesn't work. What it supposed to do is take certain values from an array written in JSON format and apply them to the top and left style properties of the 'target' div in HTML, which contains a image of a small black square. The u/v values are supposed to be the x/y values for pixels on the photo I posted below. The button is supposed to go through the each array object every time its clicked and loop to the first element when it reaches and display the final one. I've tried everything please help!

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>



Answer
  • The bottom of your JavaScript code was cut off.
  • I also enhanced the logic in updateCache() so that it cycles through the list of caches without error.
  • You cannot use window.caches because it is a browser feature.
  • I am also calling showCache() on load since I thought that made sense.
  • Any other modifications are left as an exercise for the reader.

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>