Witam, czy ktoś pomógłby mi dokończyć skrypt do zadania, w którym najpierw po załadowaniu strony losuje się 1 z 3 plików .css, który będzie domyślny. Następnym krokiem było załadowanie odpowiedniego pliku .css po wciśnięciu jednego z 3 przycisków (każdy przycisk ma przypisany plik .css i po wciśnięciu zmienia się styl strony). Teraz mam problem z tym, aby po naciśnięciu przycisku ze stylem, który jest załadowany, pojawiał się alert o stosownym komunikacie typu "ten styl jest już wybrany".
Oto mój kod:
<html lang="pl-PL">
<head>
<meta charset="UTF-8">
<title>zestaw 3</title>
<script src="https://kit.fontawesome.com/8bb09653e9.js" crossorigin="anonymous"></script>
</head>
<body>
<script>
let mainElement = document.getElementsByTagName('link')[0];
let names = ['styl1','styl2','styl3'];
let randomValue = getRandomIntInclusive(0, 2);
replaceLinkHref(`css/${names[randomValue]}.css`, mainElement)
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function replaceLinkHref(newValue, handler){
handler.setAttribute('href', newValue);
}
function zmien1()
{
replaceLinkHref(`css/styl1.css`, mainElement)
}
function zmien2()
{
replaceLinkHref(`css/styl2.css`, mainElement)
}
function zmien3()
{
replaceLinkHref(`css/styl3.css`, mainElement)
}
</script>
<div class="menu">
<i class="fas fa-truck"></i>
<button type="button"class="styl1" onclick="zmien1()">styl 1</button>
<button type="button" class="styl2" onclick="zmien2()">styl 2</button>
<button type="button" class="styl3" onclick="zmien3()">styl 3</button>
</div>
<div class="content">
<h1>ZESTAW 3</h1>
<img src="100682_620.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tortor turpis, sodales et laoreet eu, pretium id nulla. Nam hendrerit feugiat nisi, eget varius nibh auctor bibendum. Fusce urna turpis, pharetra a mauris et, cursus congue ante. Quisque hendrerit consectetur quam faucibus tristique. Sed eu massa neque. Aliquam eu mi lacus. Pellentesque vel mollis dolor.</p>
</div>
</body>
</html>
3 pliki .css znajdują się w katalogu css.
Liczę na pomoc jak najprostszym sposobem, ponieważ nie jestem zbyt zaawansowany.