0

Я новичок, учу html/css/js где-то 1 месяц. У меня такая проблема. Мне нужно, чтобы при нажатии на кнопку из массива брался случайный текст (элемент), и выводился на сайте. Не могу понять, почему мой код не работает. Заранее, спасибо за помощь. P.s: Простите за плохой вид сайта, т.к я убрал шрифт и пол css-файла. Мне просто нужно, чтобы моя функция работала.

let phrases = [
    {text:'Текст1'},
    {text:'Текст2'},
    {text:'Текст3'},
    {text:'Текст4'},
    {text:'Текст5'}
];

function getRandomElement(phrases) {
    let index = Math.floor(Math.random() * phrases.length);
    return phrases[index];
}

let button = document.querySelector('.button');
let phrase = document.querySelector('.phrase');
if (phrases){
    button.addEventListener('click', function () {
        let randomElement = getRandomElement(phrases);
        (phrase, 'textContent', randomElement.text)
    })}
body {
    background-color: rgba(40, 39, 39, 1);
    color: white;
}

.header {
    text-align: center;
    font-size: 25px;
}

.button {
    width: 175px;
    height: 55px;
    position: absolute;
    right: 200px;
    bottom:100px;
    font-size: 25px;
    margin-top: 450px;
    margin-left: 1100px;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
    border: 1px solid white;
}

.buttontext {
    position: absolute;
    right: 255px;
    top:290px;
    font-family: Russo One;
    font-size: 25px;
}

.phrase {
  position: absolute;
  left: 30px
}
<!DOCTYPE html>
<html lang="ru">
    <head>
        <script src="js.js"></script>
        <link rel="stylesheet" href="css.css" type="text/css"/>
       <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible">
    <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="Keywords">
        <meta name="description" content="Content">
    </head>
<body>
    <div class="header">
    <h1 class="logo">Logo</h1>
    </div>
    <div class="buttontext">
        Button
    </div>
    <div class="button">
    </div>
    <div class="advice">
        <span class="phrase">
            Место отображения текста (чуть выше)
        </span>
    </div>
</body>

</html>

1 ответ 1

2

let phrases = [
  {text: 'Текст1'},
  {text: 'Текст2'},
  {text: 'Текст3'},
  {text: 'Текст4'},
  {text: 'Текст5'}
];

let button = document.querySelector('.button');
let phrase = document.querySelector('.phrase');

button.addEventListener('click', function() {
  let rand = Math.floor(Math.random() * phrases.length);
  phrase.innerText = phrases[rand].text;
});
body {
  background-color: rgba(40, 39, 39, 1);
  color: white;
}

.header {
  text-align: center;
  font-size: 25px;
}

.button {
  width: 175px;
  height: 55px;
  position: absolute;
  right: 200px;
  bottom: 100px;
  font-size: 25px;
  margin-top: 450px;
  margin-left: 1100px;
  cursor: pointer;
  transition: opacity 0.2s;
  box-sizing: border-box;
  border: 1px solid white;
}

.buttontext {
  position: absolute;
  right: 255px;
  top: 290px;
  font-family: Russo One;
  font-size: 25px;
}

.phrase {
  position: absolute;
  left: 30px
}
<div class="header">
  <h1 class="logo">Logo</h1>
</div>
<div class="buttontext">Button</div>
<div class="button"></div>
<div class="advice">
  <span class="phrase">Место отображения текста (чуть выше)</span>
</div>

4
  • В общем, не заработало. Пытаюсь понять почему. Во-первых, в консоли мне пишет: "Uncaught TypeError: Cannot read property 'addEventListener' of null at button.js:12". Я решил поставить перед addEventListener'ом if (button){, но не помогло. Вместо button перепробовал все, тоже не помогло. Ваш код я скопировал подчистую, не изменяя (ну, кроме вставки doctype и необходимостей в html). Не знаете, в чём проблема? 1 янв 2021 в 21:27
  • @АлександрХалезов, скорее всего это не работает из-за подключение скрипта до того момента, как отрендерится кнопка. Вызывайте файл button.js после <button> или в конце. Или добавьте событие, чтобы скрипт работал после загрузки страницы document.addEventListener('DOMContentLoaded', function () { /* Тут ваш код */});
    – De.Minov
    2 янв 2021 в 7:57
  • спасибо вам огромное! После подключения скрипта в конце всё заработало. 5 янв 2021 в 12:30
  • @АлександрХалезов, если мой ответ вам помог, то отметьте его как "правильный ответ" (поставить галочку)
    – De.Minov
    5 янв 2021 в 15:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.