I've been struggling with a reloading issue that keeps going back and forth when all I need is for it to go back. I've tried everything I know, but nothing seems to work. Any help would be greatly appreciated. Thank you in advance :)
var reload_button = document.getElementById("reload");
document.getElementById("btn").onclick = function () {
if (reload_button.style.transform == "rotate(360deg)")
reload_button.style.transform = "rotate(0deg)";
else reload_button.style.transform = "rotate(360deg)";
};#reload {
display: block;
margin-left: 100px;
position: absolute;
font-size: 40px;
transition: 2.5s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/8f82e7a054.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="reload"><i class="fas fa-redo"></i></div>
<button id="btn">CLICK ME</button>
<script src="main.js"></script>
</body>
</html>