Нужен совет о том, как заставить мой код работать (связывание функции javascript с элементом html) - PullRequest
Новая
       1

Нужен совет о том, как заставить мой код работать (связывание функции javascript с элементом html)

1 голос
/ 28 июня 2019

Я пытаюсь связать JavaScript с HTML и создавать прослушиватели событий, и я наткнулся на проблему с моим кодом.

HTML: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Quote randomizer</title>
  </head>
  <body>
    <p id="switchy">Click me</p>
  </body>
  <script src="script.js"> </script>
</html>

JavaScript 

const sentences = ["I am the first sentence", "Second sentence reporting in", "I am the third one", "Hello there"];

const randomIndex = Math.round(math.random()*3);

function clicky() {
  document.getElementById("switchy").innerHTML = "sentences[randomIndex]"";
}

document.getElementById("switchy").addEventListener("click", clicky);

Что я хочу от него - это заменить текст, который уже написан на HTML, случайной строкой из готового массива через случайную функцию. Однако я не уверен, что я делаю неправильно и почему это не работает.

Ответы [ 3 ]

3 голосов
/ 28 июня 2019

Найдено две проблемы:

  1. Math! == math

  2. Не ставьте кавычки вокруг переменной 

const sentences = ["I am the first sentence", "Second sentence reporting in", "I am the third one", "Hello there"];

const randomIndex = Math.round(Math.random()*3);

function clicky() {
  document.getElementById("switchy").innerHTML = sentences[randomIndex];
}

document.getElementById("switchy").addEventListener("click", clicky);
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Quote randomizer</title>
  </head>
  <body>
    <p id="switchy">Click me</p>
  </body>
  <script src="script.js"> </script>
</html>
2 голосов
/ 28 июня 2019

Ты math.random() должен быть Math.random(). Переместите randomIndex в функцию click(), чтобы она рандомизировалась при каждом нажатии кнопки «Нажми меня». Кроме того, document.getElementById("switchy").innerHTML = "sentences[randomIndex]""; должно быть document.getElementById("switchy").innerHTML = sentences[randomIndex]; Без кавычек вокруг переменной массива. Я добавил дополнительный элемент абзаца, чтобы вы могли видеть предложения, появляющиеся в случайном порядке при нажатии «Click Me». 

const sentences = ["I am the first sentence", "Second sentence reporting in", "I am the third one", "Hello there"];

function clicky() {
  let randomIndex = Math.round(Math.random() * 3);
  document.getElementById("sentence-text").innerHTML = sentences[randomIndex];
}

document.getElementById("switchy").addEventListener("click", clicky);
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Quote randomizer</title>
</head>

<body>
  <p id="sentence-text"></p>
  <p id="switchy">Click me</p>
</body>

</html>
1 голос
/ 28 июня 2019

При этом используется вызов функции для получения случайного числа. Я предполагаю, что вы хотите, чтобы 0, 1, 2 и 3 были возможными результатами, так как массив содержит 4 элемента. 

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

const sentences = ["I am the first sentence", "Second sentence reporting in", "I am the third one", "Hello there"];

function clicky() {
  document.getElementById("switchy").innerHTML = sentences[getRandomInt(3)];
}

document.getElementById("switchy").addEventListener("click", clicky);
<p id="switchy">Click me</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...