Javascript never seems to work

Question

I have been looking into the matter for the last 2 hours. I am not really a coder, but just trying to make simple website work. Alright, little bit more complicated than usually, but I tryed php and js and both ways did not work for some odd reason. I would really love to get the js working. .js, .css and .html are all in the same folder, checked the names over for thousand times already. Here's some code:

HTML:

<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="java.js"></script>
<div id="bg">
  <img src="bg.jpg" alt="" />
  <img src="bg5.jpg" alt="" />
  <img src="bg9.jpg" alt="" />
  <img src="bg11.jpg" alt="" />
</div>

Did not put full code here, but this code is inside the html tags and body. css is working as wanted so will not add here.. in css position is absolute if that matters..

JS:

$('img').hide();

function test() {
    $("#bg img").first().appendTo('#bg').fadeOut(5000);
    $("#bg img").first().fadeIn(5000);

    setTimeout(test, 7000);
}
test();

Now, if I put in css display:none then this code should start working and changing pictures. But it does not. Pictures come up right at the place behing each other when I remove the command display:none. But js just does not want to work. I tried before js too, didn't work, but this time I would like to get it work. Thank you.

Answer 1

You are trying to execute jQuery code without linking jquery library.. You should include the jQuery library file before you use it, Otherwise you'll get the error $ is undefined .

Add the following above your script:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Also, add your code inside ready() handler to make sure you script runs after the elements are created as Barmar mentioned in comments.

Answer 2

首先链接jQuery库，并确保您的代码实际被调用（例如，在$(document).ready() ）。