Jquery does not work on my browser (localhost)

Question

I have this code running on jsfiddle, but I can't get it to run locally on my browser. Maybe someone can spot something I am not doing right? Thanks in advance!

<html>
 <head>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script type="text/javascript">
      $('.main input').click(function() {
      var value = $(this).val();
      var input = $('#key_select');
      input.val(value);
      return false;
      });
   </script>
 </head>
 <body>
   <input id="key_select" type="text" name="keyword" disabled/>

   <div class="main">
     <input type="button" name="honda" value="honda" />
     <input type="button" name="mercedes" value="mercedes" />
   </div>
 </body>
</html>

Community · Accepted Answer · 2020-06-20 09:12:55Z

Place your code inside document ready handler

<script type="text/javascript">
  $(function(){
      $('.main input').click(function() {
      var value = $(this).val();
      var input = $('#key_select');
      input.val(value);
      return false;
      });
  });
</script>

Your problem is that your logic is executing before the html element exist on the page so it does nothing.

Placing the code on document ready fix this issue as this handler is executed when DOM element tree was constructed.

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.

adeneo · Accepted Answer · 2014-03-14 12:30:47Z

3

You forgot document ready, the element isn't rendered yet when you're trying to get it, so you have to either wait for the document to be ready, or move the script below the elements so that they are available when the script is running.

<html>
 <head>
   <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
   <script type="text/javascript">
      $(function() {
          $('.main input').click(function() {
              var value = $(this).val();
              var input = $('#key_select');
              input.val(value);
              return false;
          });
      });
   </script>
 </head>
 <body>
   <input id="key_select" type="text" name="keyword" disabled/>

   <div class="main">
     <input type="button" name="honda" value="honda" />
     <input type="button" name="mercedes" value="mercedes" />
   </div>
 </body>
</html>

jsFiddle adds the DOM ready handler automatically when selected in the dropdown on the left

answered Mar 14, 2014 at 12:30

adeneo

319k29 gold badges410 silver badges392 bronze badges

1 Comment

Andrew Over a year ago

Ok, its true that sometimes you need another eye to see something that you are stuck on without reason! Thanks a lot!

Collectives™ on Stack Overflow

Jquery does not work on my browser (localhost)

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related