Essentially i have tried loading my site multiple times and cannot get the JS to work.
tester.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple HTML Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
header, footer {
background-color: #f8f8f8;
padding: 10px;
text-align: center;
}
nav {
margin-bottom: 20px;
}
nav a {
margin: 0 10px;
text-decoration: none;
color: #333;
}
main {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Choose a country</h1><br>
<button function="onClick()">Grab my location</button>
<script type="text/javascript" src="tester.js"></script>
</body>
</html>
the js file.
function onClick(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(successCallback, errorCallBack)
} else {
alert("Geolocation is not supported by this browser")
}
}
function successCallback(){
console.log(position)
console.log(position.coords.latitude)
console.log(position.coords.longitude)
alert("Latitude is "+ position.coords.latitude +" and "+ position.coords.longitude )
function errorCallBack() {
switch(error.code) {
case error.PERMISSION_DENIED:
alert("Geolocation is not supported by this browser")
break;
case error.POSITION_UNAVAILABLE:
alert("Geolocation is not supported by this browser")
break;
case error.TIMEOUT:
alert("Geolocation is not supported by this browser")
break;
case error.UNKNOWN_ERROR:
alert("Geolocation is not supported by this browser")
break;
}
}
}
It should be loading the button and asking for the location through the alert but it is not working. Nothing is showing up in the console either.
And then here is the output with the inspect showing me CSP has blocked my JS.
