I'm trying to create a heading that changes fonts every second, but I'm having trouble changing the variable to set it to another font. Check out my code here.
Despite watching tutorials, everything seemed too confusing.
var root = document.querySelector(":root");
var rootstyles = getComputedStyle(root);
var red = rootstyles.getPropertyValue(--red);
console.log("red: ", red);:root {
--red: "verdana";
}
h1,
p {
font-family: var(--red);
}<h1 style="text-align: center;">Fortune cookie!</h1>
<p style="text-align: center;">Check your luck by clicking the cookie!</p>