jQuery script not working in HTML page

Question

I am trying to use a jQuery script, yet it is not displaying as it should. I have it working within JSFiddle. Yet it does not work within my page: when an option is chosen it does not show anything at all. What am I doing wrong?

<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="css/faqtest.css" rel="stylesheet">
  </head>
  <body>
    <script type="text/javascript">
    $('select').on('change',function() {
      var answer = $(this).val();
      $('.answers').hide();
      $('#'+answer).show();
    })
    </script>
    <select>
      <option disabled selected>choose</option>
      <option value="answer1">answer1</option>
      <option value="answer2">answer2</option>
      <option value="answer3">answer3</option>
    </select>
    <div class="answers" id="answer1">answer1</div>
    <div class="answers" id="answer2">answer2</div>
    <div class="answers" id="answer3">answer3</div>
  </body>
</html>

No select elements created at the time you run the script. – Teemu Feb 04 '17 at 08:28 — Teemu, Feb 04 '17 at 08:28
Put your code inside `$(document).ready()`. – Barmar Feb 04 '17 at 08:28 — Barmar, Feb 04 '17 at 08:28

score 2 · Answer 1 · edited Feb 04 '17 at 08:32

2

Execute the code on document ready.

$(function(){
  $('select').on('change',function() {
    var answer = $(this).val();
    $('.answers').hide();
    $('#'+answer).show();
  });
});

edited Feb 04 '17 at 08:32

dda

6,030
2
25
34

answered Feb 04 '17 at 08:29

Vladu Ionut

8,075
1
19
30

jQuery script not working in HTML page

1 Answers1