How do I make my character jump on a platform?

Question

This is the code I've written so far:

Html:

 <div id="stage">
  <div id="splash" class="screen">
    <h2>Land</h2>
    <button id="howtobutton">Instructions</button>
    <button id="hsbutton">High Score</button>
    <button id="optionsbutton">Options</button>
    <button id="playbutton">Play Game</button>
  </div>
    <div id="instructions" class="screen">
      <h2>How to Play</h2>
      <button class="backtomenu">Back to Menu</button>
    </div>
  <div id="highscores" class="screen">
    <h2>High Scores</h2>
    (Username), your high score is: 
    <button class="backtomenu">Back to Menu</button>
  </div>
  <div id="options" class="screen">
    <h2>Options</h2>
    <button class="backtomenu">Back to Menu</button>
  </div>
    <div id="game" class="screen">
      <div id="ground" class="platform"></div>
      <div id="score"> Score:</div>
      <div id="player"></div>
      <button id="btn-quit" class="backtomenu">Back</button>
    </div>

CSS:

div {
  border: 1px solid black;
} h2 {
  text-align: center;
} button {
  display: block;
  width: 100px;
  margin: 10px auto;
} #stage {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
  background-image: url(http://www.hlgjyl888.com/data/wallpapers/151/WDF_1917288.gif);
  background-size: cover;
} #splash {
  display: block;
} .screen {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  color: white;
} #player {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  background-color: blue;
  bottom: 50px;
  top: 269px;
  left: 100px; 
}
} #score {
  position: relative;
  top: 0px;
  right: 5px;
  width: 100px;
} #btn-quit {
  position: absolute;
  margin: 0;
  bottom: 0px;
  left: 0px;
} .platform {
  position: absolute;
  background-color: white;
} .onPlatform {
  background-color: blue;
}
#ground {
  top: 300px;
  width: 400px;
  height: 3px;
}

JavaScript:

var gravity = 1;
var maxheight;
var timer;
var jump = 32;
var velocity = 0;
var jumppressed = false;
// var username = prompt("What is your name?")


$(document).ready(function() {



  $('#howtobutton').click(function() {
    showScreen('#instructions');
  });
  $('#hsbutton').click(function() {
    showScreen('#highscores')
  });
  $('#playbutton').click(function() {
    showScreen('#game')
  });
  $('#optionsbutton').click(function() {
    showScreen('#options')
  });
  $('.backtomenu').click(function() {
    showScreen('#splash')
  });




maxheight = Math.round($("#stage").height() - $("#player").height());

timer = setInterval(update, 1000/60);

   $(document).keypress(function(e) {
    console.log(e.which);
    if (e.which === 32) {
      console.log("it works");
      jump();
    }});
});   


function showScreen(screen) {
$('.screen').hide();
$(screen).show();
};

function jump() {
  if ($("#player").position().top >= maxheight) {
    console.log("Jump is working")
    velocity = -15;
  }
};







function update() {
  if (velocity === 0 && $("#player").position().top === maxheight) {
  } else if (velocity > 0 && $("#player").position().top >= maxheight) {
    console.log(maxheight + " through ground" + $("#player").position().top);
    $("#player").css("top", maxheight + "px");
    velocity = 0;
  } else {
    velocity += gravity;
    var newPos = $("#player").position().top + velocity + "px";
    $("#player").css("top", newPos);
  }
};

However I'm very new to game development, I've been stumped for a while now, I can't figure out a way to control my character movement. Can anyone tell me what's wrong with my code? My character should be jumping on the platform whenever the space key is pressed (that's it).

Answer 1

The function you are calling (jump) is only being defined AFTER the method that is handling the input, so it happens the error "jump is not a function".

Just move your jump function code to the beginning and it will work(I have tested it myself).