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