Это работает, когда HTML, JS и CSS находятся в одном файле, но не работает, когда они находятся в разных файлах. - PullRequest
Новая
       0

Это работает, когда HTML, JS и CSS находятся в одном файле, но не работает, когда они находятся в разных файлах.

0 голосов
/ 17 февраля 2020

Я создаю файлы HTML, JS и CSS, эти файлы работают вместе, чтобы создать подсознательный тест. Это работает, когда все коды HTML, JS и CSS находятся в одном файле, но когда я разделяю их на отдельные файлы и связываю их в HTML с

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

и 

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

Не работает.

Вы можете найти мой код здесь: 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>

(я сделал код JS, почитав другие JS коды и некоторые предоставленные здесь пользователи Stackoverflow)

Что является ли это причиной?

Также я хотел бы знать, как я могу запустить эту JavaScript в течение двух минут, и после этого отобразить сообщение вроде, тест завершен и предоставить пользователям несколько вариантов выбора одного варианта. из пяти 4 ди git случайных чисел. И когда они выбирают выбранный, сообщите им, что они выбрали выбранный номер.

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Если вы откроете консоль и нажмете кнопку, вы получите: ReferenceError: startTest не определено

Это происходит потому, что обрабатывается директива onclick перед анализом js кода (простое объяснение)

Чтобы он работал на JSFiddle, вам нужно изменить настройки js на «Без переноса - нижняя часть» или «Без переноса - нижняя часть»

Проверьте документы JSFiddle: https://docs.jsfiddle.net/panels-settings

Чтобы он работал в контексте реального мира с файлами. html и. js, вам понадобится расставить все по местам Например, включая тег <script> внутри <head> или <body>, вы получаете различные варианты поведения.

Пожалуйста, поделитесь фактическим контекстом, чтобы получить реальную помощь

Также вы можете захотеть поместите весь свой код в слушатель событий, чтобы убедиться, что страница полностью загружена, как описано здесь: Чистый JavaScript эквивалент $ .ready () jQuery - как вызвать функцию, когда страница / DOM готова для it

Если вы новичок в js, рассмотрите возможность использования jquery или аналогичной структуры, это упростит ваш процесс обучения

Также я бы хотел чтобы узнать, как я могу запустить этот JavaScript в течение двух минут и после этого отобразить сообщение вроде, тест завершен и предоставить пользователям несколько вариантов выбора одного из пяти случайных чисел 4 di git. И когда они выбирают выбранный, сообщите им, что они выбрали выбранный номер.

Чтобы запустить отложенный код, проверьте функцию setTimeout Чтобы перехватить событие изменения в выбранном компоненте , вам нужно будет получить элемент с document.getElementById (или связанные функции), а затем присоединить слушатель к элементу с помощью addEventListener, но я думаю, что это слишком много для одной топи c

0 голосов
/ 17 февраля 2020

Пожалуйста, избегайте использования onclick="" в вашем html. Лучше всего обрабатывать все события в файле javascript. Так что удалите это из вашего html: 

onclick="startTest();"

и добавьте это в свой javascript: 

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

Кроме того, у вас проблема с областью действия с вашими переменными body, chr и prev. Вы должны определить их до вызова posChr().

Вы получите что-то вроде этого: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...