strange error in my code, because everything looks alright at least when it comes to colons

strange error in my code, because everything looks alright at least when it comes to colons

Hey, 
 I experienced a strange error in my code, because everything looks alright at least when it comes to colons: <!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
  </head>

  <body>

    <h1>My fruit list:</h1>

    Fruit Name: <input type="text" id="fruitnameinput" value="" placeholder="Fruit Name"/><br>
    Fruit Color: <input type="text" id="fruitnamecolor" value="" placeholder="Fruit Color"/><br>
    Fruit Weight: <input type="text" id="fruitnameweight" value="" placeholder="Fruit Weight"/><br>
    <button id="buttonclick">Get Value</button>
    <ol id="fruitList"></ol>






    <script>
      var list = $("#fruitList");
    //  var fruits = ["banana", "apple", "peach"];

var fruits= [
{fruitName: "Banana", fruitColor: "Yellow", fruitWeight:"10"},
{fruitName: "Apple", fruitColor: "Green", fruitWeight:"15"},
{fruitName: "Pear", fruitColor: "Red", fruitWeight:"20"}
];
      function redraw() {
        list.html("");
        $.each(fruits, function(index, value) {
          $("<li/>").text(value.fruitName + "," + value.fruitColor + "," + value.fruitWeight ).appendTo(list);
        });

      }

      redraw();

      $("#buttonclick").click(function() {

            var fruitName2 = $("#fruitnameinput").val();
            var fruitColor2 = $("#fruitnamecolor").val();
            var fruitWeight2 = $("#fruitnameweight").val();
            var fruitObject= [fruitName:fruitName2, fruitColor:fruitColor2, fruitWeight:fruitWeight2];
        fruits.push(fruitObject);

        redraw();
      });

    </script>

  </body>

</html>