All geek questions in one place

Cannot use jQuery code to change CSS element

I am following a tutorial on moving a character around the screen using html, css and jquery. I'm not sure why the arrow keys do not move the character. When I press the left, up, right, or down keys, the only thing that happens is the scroll bar in the left and lower directions. What happened?

$(function() {
  var player = '<div id="player"></div>';
  $("#map").append(player);


  $(document).keydown(function(e) {
    //alert(e.keyCode);

    var position = $("#player").position();


    switch (e.keycode) {
      case 37: //left
        $("#player").css('left', position.left - 20 + 'px');
        break;

      case 38: //up
        $("#player").css('top', position.top - 20 + 'px');
        break;

      case 39: //right
        $("#player").css('left', position.left + 20 + 'px');
        break;

      case 40: //down
        $("#player").css('top', position.top + +'px');
        break;

    }
  });

});
#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0") no-repeat;
  width: 165px;
  height: 175px;
}
#map {
  position: relative;
  border: 1px solid black;
  height: 600px;
  width: 800px;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="maze.css" />
</head>

<body>
  <h1>Maze</h1>


  <div id="map"></div>
  <div id="output"></div>


</body>

</html>
Run codeHide result
+4
source share
3 answers

Javascript is case sensitive.

//e.keycode is wrong
switch (e.keycode) {
    //blah
}

//e.keyCode is correct
switch (e.keyCode) {
    //blah
}

and there is no error in the operand,

// Wrong
$("#player").css('top', position.top + +'px');
// Correct
$("#player").css('top', position.top + 20 +'px');

Fiddle

+3
source

Moreover,

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) no-repeat;
  width: 165px;
  height: 175px;
}

it should be

#player {
  position: absolute;
  background: url("http://tse1.mm.bing.net/th?&id=OIP.M0268adc5eb05ad8612f14346c852f3dbo0&w=121&h=186&c=0&pid=1.9&rs=0&p=0&r=0"    ) ;
  background-repeat:no-repeat; 
  width: 165px;
  height: 175px;
}
+1
source

e.keyCode e.keyCode.

+1

Source: https://habr.com/ru/post/1625758/

More articles:


All Articles