Как сделать так, чтобы по нажатию кнопки из массива брался случайный текст (элемент) и выводился на сайте. Html/Css/Js

Question

Я новичок, учу 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>

Answer 1

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>

БЛОГ НА HUSL

Как сделать так, чтобы по нажатию кнопки из массива брался случайный текст (элемент) и выводился на сайте. Html/Css/Js

Ответы (1 шт):