Extreamly simple HTML js code,but why doesn`t it work?

284
November 22, 2016, at 1:20 PM

I am trying learn to make a simple quiz.So I got a script in StackOverflow.It works here http://jsfiddle.net/Zy4gW/ ,but not when I use it ,here is my code

<html>
<head>
<title>Learning how to make a quiz</title>
<script type="text/javascript">
$(function(){
$('#q-and-a li a').each(function(){
  $(this).click(function(){
      $(this).siblings('div').slideToggle(300);            
  });        
});                
});
</script>
</head>
<body>
<ul id="q-and-a">
    <li><a>Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a>Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>
<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>

</body>
</html>

Why doesn`t it run?

Answer 1
<!DOCTYPE html>
<html>
<head>
<title>Learning how to make a quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>                                    //You had not imported this library which is required for running jQuery
<script type="text/javascript">
$(document).ready((function(){                
  $('#q-and-a li a').click(function(e){           
    $(this).next('div').slideToggle(300);        //div is child of li not a sibling         
  });       
}));      
</script>
</head>
<body>
<ul id="q-and-a">
    <li><a >Question One</a>
    <div>Answer to Question One...</div>
  </li>
     <li><a >Question Two</a>
     <div>Answer to Question Two...</div>
  </li>
</ul>
<style>
    ul { margin: 0; padding: 0; }
    ul li { margin: 0; padding: 0; list-style: none; }
    ul li a { color: blue; }
    ul li div { display: none; }
</style>

</body>
</html>

Your mistakes were as follows: 1) You had not imported the library required for jQuery 2) The function you were using to access the div element Actually div is a child element of li. You were accessing it as sibling of li.
3) No need of .each function to access li separately

Answer 2

Put this on top of your script [below the title tag]

Jquery library

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
Answer 3

You are using jQuery, but i can't see where you are loading the ressource. Have a look at hosted libraries

Answer 4

You definitely want to make sure your resources are loaded properly, as noted here by others. Check your browser's dev tools to see if resources are loaded, and check the console to see if there are any errors.

I would also suggest adding a doctype to your file (at the very top, before the opening <html> tag:

<!DOCTYPE html>

The missing doctype might not be causing your issue - but then again, I've seen stranger things happen. Not to mention, it's best practice to always include this.

Rent Charter Buses Company
READ ALSO
close window after download file generates

close window after download file generates

I have javascript code for generate pdf file. [nnn]For that i have url which generates pdf file.

317
if jquery has no &#39;readonly&#39; on &#39;select&#39; and &#39;checkbox&#39;?

if jquery has no 'readonly' on 'select' and 'checkbox'?

I can't find any function like readonly on 'select' and 'checkbox'. 'Disable 'seems to be an option but the variable will be no longer exist.

285
jQuery click event does not work when fullscreen iframe in the background?

jQuery click event does not work when fullscreen iframe in the background?

jQuery click event won't fire when there is a fullscreen iframe in the background :.

427