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>
			<title>Test page</title>
			<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
			<script src="/js/js_script.js"></script>
				<h3>Test page</h3>
			<div class="container">
			<div class="link">
<select title="Product">
<img id="my_image" src="https://picsum.photos/id/493/200/300" alt="" style="width: 48px; 
height: 48px;"/>



$("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