JavaScript works on Localhost, but not on live site
Question
I'm trying to create a small JS clicking game, where a random image from a folder spawns and the user clicks it. My code is working fine on Localhost, but when i moved it all to a live site, I get a 404 undefined error.
Here is my code:
I've been trying to solve this fora day now, can't get it to work properly. Also I know the CSS should be in an external file, and it will be eventually. :)
<html>
<head>
<meta charset="utf-8">
<title>Naamari_peli</title>
<style type="text/css">
body {
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100%;
}
#shape {
width: 100px;
height: 100px;
background-position: center;
background-repeat: no-repeat;
display: none;
position: relative;
background-size: 100%;
}
.bold {
font-weight: bold;
}
#top{
width: 90%;
margin:0 auto;
text-align: center;
}
#gameArea {
margin: auto;
height: 80%;
width: 90%;
border-radius:8%;
border: 3px groove grey;
position: relative;
background-image: url(backgrounds/kai.jpeg);
background-size: cover;
background-position: top;
}
</style>
</head>
<body>
<div id="top">
<h1>Naamapeli</h1>
<p></p>
<p class="bold">Aika: <span id="timeTaken"></span></p>
</div>
<div id="gameArea">
<div id="shape"></div>
</div>
<script type=text/javascript">
var imgArray = [
<?php
$post_dir = "/";
$images = glob($post_dir . "*.jpg");
$listImages=array();
foreach($images as $image){
echo "'$image',\n";
}
?>
];
</script>
<script type="text/javascript">
var start = new Date().getTime();
/* tää lista printataan PHP:lla sivupohjaan
var imgArray = <?php echo json_encode($listImages); ?>; */
var imgArray = [
<?php
$post_dir = "/";
$images = glob($post_dir . "*.jpg");
$listImages=array();
foreach($images as $image){
echo "'$image',\n";
}
?>
];
function makeImgAppear() {
var rand = imgArray[Math.floor(Math.random() * imgArray.length)];
var urlString = 'url(' + rand;
var top = Math.random() * 400;
var left = Math.random() * 1100;
var width = (Math.random() * 150) + 75;
document.getElementById("shape").style.borderRadius = "50%";
document.getElementById("shape").style.backgroundImage = urlString;
document.getElementById("shape").style.width = width + "px";
document.getElementById("shape").style.height = width + "px";
document.getElementById("shape").style.top = top + "px";
document.getElementById("shape").style.left = left + "px";
document.getElementById("shape").style.marginBottom = 0.5 * width + "px";
document.getElementById("shape").style.position = "relative";
document.getElementById("shape").style.display = "block";
start = new Date().getTime();
}
function appearAfterDelay() {
setTimeout(makeImgAppear, Math.random() * 2000);
}
appearAfterDelay();
document.getElementById("shape").onclick = function() {
document.getElementById("shape").style.display = "none";
var end = new Date().getTime();
var timeTaken = (end - start) / 1000;
document.getElementById("timeTaken").innerHTML = timeTaken + "s";
appearAfterDelay();
}
</script>
</body>
</html>
1 answers
solution1
2 ACCPTED 2016-06-18 13:35:08
The path you are passing to the glob() function is probably causing the problem. I guess your image files are located in the same folder as your php script. So your directory structure will look something like that:
htdocs
peli.php
kai.jpg
someimg.jpg
If you want to access one of the files in the same folder there is no need for a leading slash.
Use the following
// path without leading slash
$images = glob("*.jpg");
or you can use a relative path just like that
// relative path
$images = glob("./*.jpg");
both will work fine.
The likeliest reason that it works on your localhost and not on your live site is that there is running a different os than on your local machine. On unix machines, absolute paths start with a slash, eg
/etc/network/interfaces
If you now specify
/*.jpg
as input parameter for the glob() function it will probably look for the jpg files in the root directory, depending on the os your webserver is running on.
If changing the path isn't working and the error remains, take a look at the docs for the glob() function on http://php.net/manual/en/function.glob.php . The function might not be available on the os your webserver is running on.
Note: This function isn't available on some systems (eg old Sun OS).
Or there is some other error with glob() and the error is not indicated correctly according to the docs.
Return Values
Returns an array containing the matched files/directories, an empty array if no file matched or FALSE on error.
Note: On some systems it is impossible to distinguish between empty match and an error.
You can also take a look at the libc.a reference at http://www.delorie.com/djgpp/doc/libc/libc_426.html as the glob() function in php implements the libc glob() pattern matching.
Greets,
Max
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.