HTML - <body onresize=""> not working

robeng · March 20, 2017

Hi! I can't get my onresize to work. It just says that my function is undefined! Here is my code!

<!doctype html>
<html>
	<head>
		<title>JQuery spel</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/stil.css">
		<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

		<script type="text/javascript" src="script/start.js"></script>
		<script type="text/javascript" src="script/playerMovment.js"></script>

	</head>
	<body onresize="playerHeight()">

		<header><h1>Jquery spel</h1></header>
		<br>
		<div id="map"></div>
		
	</body>
</html>

$(document).ready(function(){

	$("#map").append("<div id='player1'></div>");

	function playerHeight() {

		var setPlayerHeight = $("#player1").width();
		
		$("#player1").css("height", setPlayerHeight);
	}


	playerHeight();

});

Can you see any problems?

Thanks in advance!

mikat · March 20, 2017

place the function outside of the document ready thing, variables (and functions, because functions are stored in variables) are function scoped meaning you can't access them outside a function.

function playerHeight() {
  var setPlayerHeight = $("#player1").width();

  $("#player1").css("height", setPlayerHeight);
}

$(document).ready(function(){

	$("#map").append("<div id='player1'></div>");

	playerHeight();

});