Loading screen javascript functions arent being called`?

Hello!

I have recently spend some time making my own loading screen using bulma, jquery and the gmod javascript functions. It has a slideshow as a background, thats why I need jquery.

Anyways I am having some problems with the javascript functions. I am trying to get the mapname and available slots, but the values remain unchanged.

Here is the relevant script block


<head>
  <script type="text/javascript">

	function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode){
		document.getElementById("mappreview").src = 'http://image.www.gametracker.com/images/maps/160x120/garrysmod/' + mapName + '.jpg';
		document.getElementById("mapname").innerHTML = mapname;
		document.getElementById("playerslots").innerHTML = maxplayers + ' slots';
	
	}
</script>
  <script src="jquery-3.2.1.min.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LOADING</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/bulma.css">
	<link rel="stylesheet" href="./styles/main.scss">

  </head>

I have a 2nd script block at the end of the file, which is for the slideshow. Not sure if that is relevant.

I hope you can help me figure out what I am doing wrong!



Here is the full code:


<style>
[data-slides] {
	background-image: url(../../uploads/banner1.jpg); /* Default image. */
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	transition: background-image 1s linear;
}

</style>
<html>
  <head>
  <script type="text/javascript">

	function GameDetails(servername, serverurl, mapname, maxplayers, steamid, gamemode){
		document.getElementById("mappreview").src = 'http://image.www.gametracker.com/images/maps/160x120/garrysmod/' + mapName + '.jpg';
		document.getElementById("mapname").innerHTML = mapname;
		document.getElementById("playerslots").innerHTML = maxplayers + ' slots';
	
	}
</script>
  <script src="jquery-3.2.1.min.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LOADING</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/bulma.css">
	<link rel="stylesheet" href="./styles/main.scss">

  </head>
  <body class="test"
	data-slides='[
		"./pictures/4000_screenshots_20171028192219_1.jpg",
		"./pictures/download.jpg"
	]'>

	

  
  
  
  <section class="section">
		<center>
		<div class="container is-pulled-center">
			<h1 class="title is-1" id="status" style="color:#3362af">LOADING...</h1>
		</div>
		<div class="container">
			<progress class="progress" value="15" max="100">15%</progress>
		</div>
		</center>
	</section>
	<div class="container">
		<div class="columns">
			<div class="column">
				<ul class="menu-list">
				<li>
					<a class="is-active subtitle is-2">Rule 1</a>
					<a class="ruleItem subtitle is-3">NO SPAWNKILLING|NO MASS RDM</a>
				</li>
				<li>
					<a class="is-active subtitle is-2" >Rule 2</a>
					<a class="ruleItem subtitle is-3">RESPECT OTHERS STUFF</a>
				</li>
				<li>
					<a class="is-active subtitle is-2">Rule 3</a>
					<a class="ruleItem subtitle is-3" >LET OTHERS HAVE FUN</a>
				</li>
				
			  </ul>

			</div>
			<div class="column">
				<div class="card">
				  <div class="card-image">
					<figure class="image is-4by3">
					  <img id="mappreview" src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
					</figure>
				  </div>
				  <div class="card-content">
					<div class="media">
					  <div class="media-left">
						<p class ="title is-5">Playing on:</p>
					  </div>
					  <div class="media-content">
						<p class="title is-4" id="mapname">~~~~~Map~~~~~~</p>
						<p class="subtitle is-6" id="playerslots">~~~Players/MaxPlayers~~~~</p>
					  </div>
					</div>
				  </div>
				</div>
			</div>
		</div>
	</div>
  </body>

</html>
<script>

/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
(function($) {
	
	'use strict';

	var $slides = $('[data-slides]');
	var images = $slides.data('slides');
	var count = images.length;
	var slideshow = function() {
		$slides
			.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
			.show(0, function() {
				setTimeout(slideshow, 5000);
			});
	};
		slideshow();
	
}(jQuery));
</script>


first thing I’m noticing is you wrote mapName instead of mapname which is the parameter

Most of this will not work due to gmod’s outdated autism web rendering program.

has slideshows so take example from that

The slideshows work tho

[editline]30th October 2017[/editline]

Thank you!

That fixed my problem!!

Do you know by any chance if gametracker hosts different sizes other than 160x120?