This works when HTML, JS and CSS are in one file but doesn't work when they are in different files

1

I’m creating an HTML, JS and CSS file, these files work together to create a subliminal test. This works when all the HTML, JS and CSS codes are in one file, but when I split them into separate files, and link them in HTML with

<style src="filename.css"></style>

and

<script src="filename.js"></script>

It is not working.

You can find my code here: https://jsfiddle.net/2vasmch5/

JS:

function startTest(){
	
	var h = document.getElementById("bt");
	if (h.style.display === "none"){
		h.style.display = "block";
	} else {
		h.style.display = "none";
		}

var fourdigitsrandom  = Math.floor(1000 + Math.random() * 9000);

var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var bgColor = "rgb(" + r + "," + g + "," + b + ")";

var rfd_rc = "rgb(" + (r-1) + "," + (g-1) + "," + (b-1) + ")";

document.querySelector('.rfd').style.color = rfd_rc; 

function brColor() {
document.body.style.background = bgColor;
	}
brColor()
function rnColor() {
document.querySelector('.rfd').style.fontSize= "500%";
document.querySelector('.rfd').innerHTML=fourdigitsrandom;
	}
rnColor()

posChr();

const body = document.body;
const chr = document.querySelector('.rfd');
const prev = [0,0];

function posChr () {
  let x = Math.floor(Math.random() * body.offsetWidth);
  let y = Math.floor(Math.random() * body.offsetHeight);
  
  while (Math.sqrt((x - prev[0]) ** 2 + (y - prev[1]) ** 2) < 10) {
    x = Math.floor(Math.random() * body.offsetWidth);
  	y = Math.floor(Math.random() * body.offsetHeight);
  }
  chr.style.left = `${x}px`;
  chr.style.top = `${y}px`;
  chr.textContent = fourdigitsrandom;
  prev[0] = x;
  prev[1] = y;

  setTimeout(posChr, 500);
	
}

setTimeout(posChr, 500)

CSS:

body {
  height: 100vh;
}
.rfd {
  position: fixed;
}

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Subliminal Test</title>

</head>

<body>
<h1>Subliminal Test</h1>

<button id="bt" type="button" onclick="startTest();">Start Test</button>

<span class="rfd"></span>

</body>

</html>

(I made the JS code by gleaning other JS codes and some provided Stackoverflow users here)

What is the reason for this?

Also I’d like to know how can I run this JavaScript for two minutes and after that show a message like, test ended and provide users with multiple options to select one option from a five 4 digit random numbers. And when they select the chosen one, inform them that they have selected the chosen number.

2

Syntax for external CSS is wrong, this should be in the head:

<link rel="stylesheet" type="text/css" href="filename.css">

The JS should either be in the head with a defer attribute, or at the end of <body>. Otherwise it’s going to run before the element with the class rfd exists.

3

I did try that and it didn’t make it work.

How would I be able to make this run for two minutes and after that show a message with 5 options, when the user selects the number which was flashed, they have to informed about it.

4

What do you mean by doesn’t work? What errors are shown? And what does your actual HTML code look like with the link and script elements?

5

This is what my HTML looks like after incorporating your suggestion.

Now the random number is displayed at random locations, but the background color isn’t changed, and random number’s color isn’t changed.

<!DOCTYPE html>
<html>
<head>
<title>Subliminal Test</title>
<link rel = "stylesheet" href ="jse.css" type = "text/css">
</head>

<body>
<h1>Subliminal Test</h1>

<button id="bt" type="button" onclick="startTest();">Start Test</button>

<span class="rfd"></span>

<script src = "jse.js"></script>
</body>

</html>