CODEWITHSUNDEEP
jquery
PoorYorick
PoorYorick

Reputation: 23

jquery does not display content

I this simple bit of test code to loop through and display content from an array. When I run it in my browser, it doesn't display or run any errors. 

<html>
    <head>
    <title>jquery each test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
        <script type="text/javascript">
            var arr = ["One", "Two", "Three", "Four", "Five"];
            var task = "";
            $(document).ready(
              $.each(arr, function(index, value) {
                task += value + "<br>";
                $('div.content').html(task);
              }));
        </script>
    </head>
    <body>
        <div class="content"></div>
    </body>
</html>

Upvotes: 1

Views: 81

Answers (2)

gaetanoM
gaetanoM

Reputation: 42044

As described in document-ready documentation:

$( document ).ready(function() {
    YOUR CODE HERE
});

So your code should be:

var arr = ["One", "Two", "Three", "Four", "Five"];
var task = "";
$(document).ready(function () {
  $.each(arr, function (index, value) {
    task += value + "<br>";
    $('div.content').html(task);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content"></div>

A shorter form is:

    $(function () {
        $.each(arr, function (index, value) {
            task += value + "<br>";
            $('div.content').html(task);
        });
    });

Upvotes: 0

Nikhil.Patel
Nikhil.Patel

Reputation: 959

Change your ready function code with following line

 $(document).ready(function(){
          $.each(arr, function(index, value) {
            task += value + "<br>";
            $('div.content').html(task);
          })});

Upvotes: 1

Related Questions