I have a problem running this code with Firefox (version 32.0)
<!DOCTYPE html>
<html>
<head>
<title>Test A</title>
<script>
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
function begin(){
parag = document.getElementById("parag");
parag.addEventListener("click", function () {showCoords(event); }, false);
}
</script>
</head>
<body onload = "begin()">
<p id="parag">To display the mouse coordinates click in this paragraph.</p>
</body>
</html>
It works in Chrome and other browsers, though when I run it with Firefox 32.0 it gives me this error:
ReferenceError: event is not defined
On the contrary, this code works in Firefox without errors:
<!DOCTYPE html>
<html>
<head>
<title>TestB</title>
<script>
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}
</script>
</head>
<body>
<p onclick="showCoords(event)">To display the mouse coordinates click in this paragraph.</p>
</body>
</html>
Can anyone tell me why the former code doesn't work while the latter does?
Again, both work in Chrome but the first is buggy in Mozilla Firefox (32.0).
Thank you in advance.
Note: don't tell me to update the browser (I must use it) nor to use jquery or similar.
Not sure if it worked in Firefox because I don't want to use Firefox.
<!DOCTYPE html>
<html>
<head>
<title>Test A</title>
<script>
function showCoords(evt){
alert(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY// + "\n"
);
}
function begin(){
parag = document.getElementById("parag");
parag.addEventListener("click", function(e) {showCoords(e);}, false);
}
</script>
</head>
<body onload="begin()">
<p id="parag">To display the mouse coordinates click in this paragraph.</p>
</body>
</html>
Firefox does not have the global window.event available, even the latest version(53.0), but Chrome has.
Try sending event to the begin function like this begin(event) and then send it to the showCoords function on the js side
Also in the js when accepting the event, u can try this,
event = e || windows.event so u can be sure that all browsers get covered
Related
As in the question I'm trying to fire up a code when a event happens, in my case I got the following index.html code:
<html>
<body>
<script>
window.addEventListener('storage', function(event) {
console.log("changed key: " + event.key);
console.log("old value : " + event.newValue);
});
</script>
</body>
</html>
And here I'm trying to put a item in the localStorage to trigger the javascript code from index.html:
<html>
<body>
<script>
window.localStorage.setItem("sss", "test");
console.log(window.localStorage.getItem("sss"));
</script>
</body>
</html>
Couldn't get the output working unfortunately, any ideas?
thanks for helping !
I'm trying to use the last version of BarcodeScanner (https://github.com/wildabeast/BarcodeScanner/) with ponegap on ios with Xcode 6.2. It works greats and give me the good result when scanning, but when I try to leave camera mode by clicking 'cancel', it does not works ! I have searched everywhere, I can't find a solution :/
Here my code (very basic)
html :
<body>
<input type="button" id="scanButton" value="SCAN" />
<div class="content">
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="barcodescanner.js"></script>
<script src="js/jQuery1.11.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
js
$("#scanButton").click(function(){
scanWithCordova();
});
function scanWithCordova(){
cordova.plugins.barcodeScanner.scan(
function (result) {
$('.content').html("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
Install it from the GIT repo like this:
phonegap plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git
It fixed it or me. I think there are bug fixes that haven't been released in the installable package yet.
Making my own version of cookie clicker for the lols at school, having some problems;
<!DOCTYPE html>
<html>
<head>
<title>Patrick Clicker</title>
<script>
var patricks = parseInt(localStorage.getItem("patrickcount"));
function increment(n) {
localStorage.setItem("patrickcount", patricks + n);
document.getElementById("patrickcounter").innerHTML = "Patricks: " + patricks;
}
</script>
</head>
<body>
<img src="patrick.jpg" onclick="increment(1)">
<p id="patrickcounter">
Patricks: 0
</p>
</body>
</html>
When I click my face, it says "Patricks: NaN"
I know what NaN means, but I don't know why the error is being caused.
Any help would be appreciated.
It won't work initially because you don't have a value at first in localStorage.
You can do this :
var patricks = parseInt(localStorage.getItem("patrickcount"))||0;
Do you intentionally display the value before increment ? If that's not your intent, change your function to
function increment(n) {
patricks += n;
localStorage.setItem("patrickcount", patricks);
document.getElementById("patrickcounter").innerHTML = "Patricks: " + patricks;
}
If you want the page to show the right value right before you click, add this at the end of the body :
<script>increment(0)</script>
I'm doing the PluralSight JavaScript Fundamentals course and he enters this code into the JavaScript window of jsbin (jsbin.com)
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
var streetNumber = 49;
var streetName = "Brunswick";
write(typeof streetNumber + " " + streetNumber);
write(typeof streetName + " " + streetName);
and when he Previews it writes out the types and values. The video is a year old and now jsbin has a Render (not Preview) button. When I enter the above code and Render I get a blank screen.
I tried pasting the code into an .html file
<!DOCTYPE html>
<html>
<head>
<!--<meta charset=utf-8 />-->
<title>JS Test</title>
</head>
<body>
<p id="hello">Hello World</p>
<script>
function write(message) {
document.getElementById('message').innerHTML += message + '<br/>';
}
var streetNumber = 49;
var streetName = "Brunswick"';
write(typeof streetNumber + " " + streetNumber);
write(typeof streetName + " " + streetName);
</script>
</body>
</html>
and then opened the file in IE9, and the latest version of Chrome, Firefox, Safari and Opera (my OS is Win7 Ult). They all display Hello World and nothing else. I'm probably missing something really simple here, can someone help me out?
You don't have a message element. Change the #hello element to #message.
<p id="hello">Hello World</p>
To this
<p id="message">Hello World</p>
This is what is needed for the getElementById code to have a place to print your output. Without an element having the requested ID, nothing will turn up, and hence nothing will be printed.
You have a syntax error as well:
/* v----- This little guy here doesn't belong. */
var streetName = "Brunswick"';
Note the umatched single quote at the end of this string. Remove that and you should be good to go:
I'm experimenting with the Geolocation API in Google Chrome (v13). I've produced a simple HTML page to get to grips with the basics:
<html>
<head>
<script type="text/javascript">
navigator.geolocation.getCurrentPosition(doStuff, error, setOptions);
function setOptions(geoLoc) {
geoLoc.enableHighAccuracy = true;
geoLoc.timeout = 30;
geoLoc.maximumAge = 0;
}
function doStuff(geoLoc) {
document.getElementById("refreshTimestamp").innerHTML = "Last refresh: " + Date.now();
document.getElementById("latitude").innerHTML = "Latitude: " + geoLoc.coords.latitude;
document.getElementById("longitude").innerHTML = "Longitude: " + geoLoc.coords.longitude;
document.getElementById("altitude").innerHTML = "Altitude: " + geoLoc.coords.altitude;
document.getElementById("accuracy").innerHTML = "Accuracy: " + geoLoc.coords.accuracy;
document.getElementById("altitudeAccuracy").innerHTML = "Altitude Accuracy: " + geoLoc.coords.altitudeAccuracy;
document.getElementById("heading").innerHTML = "Heading: " + geoLoc.coords.heading;
document.getElementById("speed").innerHTML = "Speed: " + geoLoc.coords.speed;
}
function error(geoLoc) {
document.getElementById("error").innerHTML = "ERROR! Code: " + geoLoc.code + "; Message: " + geoLoc.message;
}
</script>
</head>
<body onload="doStuff()">
<p id="refreshTimestamp"></p>
<p id="latitude"></p>
<p id="longitude"></p>
<p id="altitude"></p>
<p id="accuracy"></p>
<p id="altitudeAccuracy"></p>
<p id="heading"></p>
<p id="speed"></p>
<p id="error"></p>
</body>
</html>
Running this page, everything appears fine - the latitude, longitude and accuracy are displayed as expected. However, looking at the Developer Tools Console, I'm presented with an error:
Uncaught TypeError: Cannot read property 'coords' of undefined (geo.html:14)
Debugging it looks like the Position object is undefined at it's first call - the line dealing with latitude. Yet, there are no errors for any of the further lines. In fact, after the latitude line the Postition object comes into existence.
Things I've tried to prevent this error include:
Moving the getCurrentPosition call to after the callback function declarations
assign geoLoc.coords to an XY variable as the first line of the doStuff() function (after doing this, it was this part of the code that caused the error)
Am I calling the Position object incorrectly? Is the a Chrome quirk? Is this something to do with the time it's taking to determine the position?
Thanks,
Chris.
It is undefined because of this:
<body onload="doStuff()">
Maybe you wanted something like this:
function init() {
navigator.geolocation.getCurrentPosition(doStuff, error, setOptions);
}
...
<body onload="init()">