Js script not working on my github page

Hello. I tried to enable javascript on my page, but when I tried to add a block to show an image given the option in the selection bar, the selection bar does not work. It shows the default image whichever option I select. The page is: https://wangqc0.github.io/test/.

However, it works on: https://jsfiddle.net (HTML + JS, no additional CSS), where I input:

<!DOCTYPE html>
	<html>
		<head>
			<title>Test page</title>
			<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
			<script src="/js/js_script.js"></script>
		</head>
		<body>
			<nav>
				<h3>Test page</h3>
			</nav>
			<br>
			<div class="container">
			
			<div class="link">
<select title="Product">
<option>493</option>
<option>976</option>
</select>
<img id="my_image" src="https://picsum.photos/id/493/200/300" alt="" style="width: 48px; 
height: 48px;"/>
</div>

			
			</div>
		</body>
	</html>

and:

$("select[title='Product']").on('change', function(){
  var imgLocation = $(this).val();
  $("#my_image").attr('src','https://picsum.photos/id/' + imgLocation + '/200/300');
});

Is it the problem of the kramdown markdown?

Could anyone explain what is the problem? Thanks.

The problem is probably this:

The link is absolute, so if that’s loaded from https://wangqc0.github.io/test/ the browser will try to load the script from https://wangqc0.github.io/js/js_script.js. Assuming the file exists in your repository, use a relative link.

1 Like

Problem solved after I include the js scripts after </body>. Thanks.

1 Like