Javascript: Unexpected Token [ on line 92

Question

I am having trouble with my html page here. On the console it shows me that there is 1 error on line 92 due to an unexpected token. Im trying to drag the image on the page to a designated box. Once dragged it should stay in the box. When I click on the image i should be able to drag it out of the box. I am not sure where i went wrong, but its completely not working at this point. All help is appreciated.

 $(document).ready(function() { var pictureIds = 20; var Size = 400; var table = $('#results').DataTable(); $.get("https://unsplash.it/list", function(Res) { for (var i = 0; i < pictureIds; pictureIds++) { var randomNumber = Math.floor(Math.random() * pictureIds.length) $('.left').append($("<img>", { src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id, id: randomNumber, class: "leftImg" })); } (".leftImg").draggable({ revert: "invalid" }); $("#right").droppable({ accept: ".leftImg", drop: function(event, ui) { ui.draggable.attr("id"), $(ui.draggable).detach().css({ top: 2, left: 0 }).appendTo($(this)); window.alert("Dropped image with an ID of " + ui.draggable.attr('id')); //Create rows var rowNode = table.row.add({ Res[image id].id, Res[image id].filename, Res[image id].author, Res[image id].post_url }).draw() .node(); table.row.add({ Res[image id].id, Res[image id].filename, Res[image id].author, Res[image id].post_url }).draw(); $(rowNode).addClass(ui.draggable.attr('id')); } }) }); });

 .left { padding: 20px; order: solid #000000 2px; height: 50%; width: 90%; } #right { width: 30%; border: solid #000000 2px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; float: right; min-height: 400px; }

 <html> <head> <!-- head stuff goes here --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" /> </head> <body> <!-- HTML content goes here --> <div class="left"> <img class="leftImg" src="https://source.unsplash.com/random/200x200" id="102" /> <div id="right"> </div> </div> <table id="results" style="width:100%"> <thead> <tr> <th>id</th> <th>filename</th> <th>author</th> <th>url</th> </tr> </thead> <tbody> </tbody> </table> </html>

Answer 1

I think you just got a little overzealous with some editing... A few typo's and I think you're good:

Missing the $ on the line " (".leftImg").draggable({"
The line var randomNumber = Math.floor(Math.random() * pictureIds.length) needs to have pictureIds.length changed to pictureIds as it is an int not an array.
Your loop is on the variable i but you incremented pictureId's instead of i.
The part where you are doing table.row.add had Res[image id] and I am not sure what is supposed to be in place if image id but Res[image id] is not valid. I commented that out in the code below but what I have edited below is draggable into the box.

$(document).ready(function() {

  var pictureIds = 20;
  var Size = 400;
  var table = $('#results').DataTable();

  $.get("https://unsplash.it/list", function(Res) {
    for (var i = 0; i < pictureIds; i++) {
      var randomNumber = Math.floor(Math.random() * pictureIds);

      $('.left').append($("<img>", {
        src: "https://picsum.photos/" + Size + "/" + Size + "?image" + Res[randomNumber].id,
        id: randomNumber,
        class: "leftImg"
      }));

    }

    $(".leftImg").draggable({
      revert: "invalid"
    });

    $("#right").droppable({
      accept: ".leftImg",
      drop: function(event, ui) {
        ui.draggable.attr("id"),
          $(ui.draggable).detach().css({
            top: 2,
            left: 0
          }).appendTo($(this));
        window.alert("Dropped image with an ID of " + ui.draggable.attr('id'));

        //Create rows
        /*
        var rowNode = table.row.add({
            Res[randomNumber].id,
            Res[randomNumber].filename,
            Res[randomNumber].author,
            Res[randomNumber].post_url
          }).draw()
          .node();

        table.row.add({
          Res[randomNumber].id,
          Res[randomNumber].filename,
          Res[randomNumber].author,
          Res[randomNumber].post_url
        }).draw();
        */
        $(rowNode).addClass(ui.draggable.attr('id'));

      }

    })

  });
});

Javascript: Unexpected Token [ on line 92

Question

1 answers

solution1
0 ACCPTED 2019-03-19 04:13:27

Javascript: Unexpected Token [ on line 92

Question

1 answers

solution1 0 ACCPTED 2019-03-19 04:13:27

solution1
0 ACCPTED 2019-03-19 04:13:27