Javascript won't work with the html
Question
So i'm having a problem here, when i'm using jsbin it all works fine with the javascript, html and the css where they all manage to work together. But since it's better and easier to work in brackets or sublime text 2 i tried to use them. And first i couldn't get the javascript to work together with the html even though i connected them both correctly. I even tried putting all the javascript code inside a script tag in the html as you can see here:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body background="https://guideinparadise.files.wordpress.com/2013/01/down-below2.jpg">
<h1>Fiskaren</h1>
<img id="fiskespo" src ="https://pixabay.com/static/uploads/photo/2014/03/24/17/07/fishing-rod-295096_960_720.png">
<p>Sekunder:</p>
<p id="klocka"></p>
<script>
document.body.style.cursor = 'none'; // tar bort muspekaren
(document).mousemove(function (e) { //gör en funktion för musen
('#fiskespo').offset({ // tar fram bilden
left: e.pageX + -190, //positonerar musen på bilden
top: e.pageY + -110//positonerar musen på bilden
});
});
var b = 1;
for (var i= 0; i<5;i++){ // skapar en loop som skriver ut 5 stycken bilder på fiskar
fisk(b);
}
function getRandomPosition(element) {
var x = document.body.offsetHeight-element.clientHeight;
var y = document.body.offsetWidth-element.clientWidth;
var randomX = Math.floor(Math.random()*x);
var randomY = Math.floor(Math.random()*y);
return [randomX,randomY];
}
function fisk(skala) {
var img = document.createElement('img');
img.setAttribute("style", "position:fixed;");//positionerar dom
img.setAttribute("src", "http://i.imgur.com/K9egEbW.jpg"); // tar fram bilderna
document.body.appendChild(img);
var xy = getRandomPosition(img); // ger xy random position
img.style.top = xy[0] + 'px';// gör att de ej kan flyttas från ruta 1
img.style.left = xy[1] + 'px';
$(img).click(function(){ $(this).remove();}); //skapar en onclick funktion som gör så att om man klickar på bilden försvinner den
}
myTimer = setInterval(myCounter, 1000); //bestämmer hur lång tiden ska vara (1000 = 1 vanlig sekund)
var seconds = 0; //sekunden den börjar på
function myCounter() {
document.getElementById("klocka").innerHTML = ++seconds; //räknar klockan i sekunder
}
</script>
</body>
</html>
And this didn't work either. And i find this really wierd since it works on jsbin but not on a better program. Anybody have a clue on what i might be missing or if there is problems with the programs i'm using. Here is the css code aswell if you want to take a look at it all together.
#fiskespo{
width: 120px;
z-index: 2;
}
body{
background-size: 100%;
}
h1{
font-size: 60px;
font-family: cursive;
color: red;
z-index: 3;
}
p{
font-size: 40px;
position: relative;
top: -260px;
z-index: 3;
}
Thanks.
2 answers
solution1
0 2016-05-27 22:05:47
It probably has something to do with how you are opening the files. It probably can't find your script file and/or css file. Are you using a localhost? The simplest way is to use a python simple http server. You will need python on your computer for this work. Newer macs have it preinstalled. Place all your files in a single folder. Navigate to that folder in the command line. And run the command:
python -m SimpleHTTPServer
This will launch a localhost with the files in that location. Use the port it shows after you run the command. In the browser go to (using the port it gives you):
localhost:port
Also not sure if it was a typo but you don't have a closing script tag.
solution2
0 ACCPTED 2016-05-27 22:10:39
You need to include jQuery in your page and also use $ here:
$(document).mousemove(function (e) { ... });
$('#fiskespo').offset({ ... });
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.