-3

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/

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)

}
body {
  height: 100vh;
}
.rfd {
  position: fixed;
}
<!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.

noviceFedora
  • 7
  • 3
  • Hello, please provide some more info. What is exactly not working? What does console say? – markoffden Feb 17 '20 at 11:57
  • Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. Stackoverflow does support [inline live demos](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) – Quentin Feb 17 '20 at 12:06
  • @markoffden I wrote in the 1st paragraph, that it works when all are in one file but the entire thing is not working when they are in separate files, I guess it would be the JavaScript. – noviceFedora Feb 17 '20 at 12:19
  • @Quentin How would I add inline live demos? – noviceFedora Feb 17 '20 at 12:21

2 Answers2

0

If you open the console and click the button you'll get: ReferenceError: startTest is not defined

This happens because the onclick directive is being processed before your js code is parsed (simple explanation)

To make it work on JSFiddle you need to change the js settings to "No wrap - bottom of " or "No wrap - bottom of "

Check JSFiddle docs: https://docs.jsfiddle.net/panels-settings

To make it work on a real world context, with .html and .js files, you'll need to put everything in the correct place. For example, including the <script> tag inside the <head> or the <body> you get different behaviors.

Please share your actual context to get real help

Also you may want to put all your code inside an event listener to be sure the page has been loaded completely as explained here: Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for it

If you're new to js, consider using jquery or a similar framework, it will simplify your learning process

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.

To run delayed code check the setTimeout function To catch a change event on a select component, youl'll need to get the element with document.getElementById (or related functions) and then attach listener to the element with addEventListener, but I guess this is too much for a single topic

orfaust
  • 67
  • 4
  • I'm not seeing any errors in console, are you seeing this on JSFiddle or here? Thanks for that information about JSFiddle and placement of script tag. The reason is testing my theory if subliminal messages of this sort work. I tried using setTimeout and setInterval but both didn't work as expected. One was running indefinitely and one didn't run. I'm new to HTML, CSS and JS, I made this using bits and pieces of code I found here and elsewhere on the net. Using my previous knowledge of programming languages I put it together. – noviceFedora Feb 19 '20 at 09:53
  • @noviceFedora I see the error in your JSFiddle: open browser's console then click "start test" – orfaust Apr 09 '20 at 17:06
-1

Please avoid using onclick="" in your html. It's a better practice to handle all events in the javascript file. So Remove that from your html:

onclick="startTest();"

and add that in your javascript:

document.getElementById("bt").addEventListener("click", startTest);

Moreover you have a scope problem with yours variables body, chr and prev. You have to define them before the call of posChr().

You will get something like this:

document.getElementById("bt").addEventListener("click", startTest);

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()

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

  posChr();

  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)

}
body {
  height: 100vh;
}

.rfd {
  position: fixed;
}
<!DOCTYPE html>
<html>

<head>
  <title>Subliminal Test</title>

</head>

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

  <button id="bt" type="button">Start Test</button>

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

</body>

</html>
johannchopin
  • 13,720
  • 10
  • 55
  • 101