Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someone please take a look at my code below and help me out?
<body>
<section class="stencil-class" id="my">
<span class="A">A</span>
<span class="S">S</span>
<span class="I">I</span>
<span class="Aa">A</span>
</section>
<button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
function getRandomColor() {
var letters = "0123456789ABCDEF";
var randomColor = "#";
for(var i = 0; i < 6; i++){
randomColor += letters[Math.floor(Math.random() * 16777215)];
}
document.body.style.background-color = randomColor;
}
</script>
</body>
/*CSS BELOW*/
:root{
--background-color: #00d9ff;
--font-color: white;
--font-size: 300px;
--text: center;
--font-sizeb: 25px;
}
body{
background-color: #00d9ff;
}
.stencil-class{
text-align: var(--text);
margin-top: 100px;
margin-bottom:70px;
margin-right: 70px;
margin-left: 70px;
}
.A{
font-size: var(--font-size);
color: var(--font-color);
font-family: Sans-serif;
}
.S{
font-size: var(--font-size);
color: var(--font-color);
font-family: Sans-serif;
}
.I{
font-size: var(--font-size);
color: var(--font-color);
font-family: Sans-serif;
}
.Aa{
font-size: var(--font-size);
color: var(--font-color);
font-family: Sans-serif;
}
.js-change{
border: 3px solid #000000;
background-color: #00d9ff;
color: var(--font-color);
text-align: var(--text);
margin-left: 570px;
padding: 25px;
font-size: var(--font-sizeb);
}