<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="controls_btns">
<button class="control" id="repeat_btn" onclick="toggleRepeat()">
<img src="{% static 'img/repeat.png' %}" alt="">
</button>
</div>
</body>
</html>
var repeat_btn = document.getElementById("repeat_btn")
var isRepeat = 1
var local = window.localStorage
if (local.getItem("isRepeat")) {
isRepeat = local.getItem('isRepeat')
if (isRepeat == 1) {
repeat_1()
} else if (isRepeat == 2) {
repeat_2()
} else {
repeat_3()
}
}
function toggleRepeat() {
if (isRepeat == 1) { // 1 => 2
repeat_2()
} else if (isRepeat == 2) { // 2 => 3
repeat_3()
} else { // 3 => 1
repeat_1()
}
local.setItem('isRepeat', isRepeat)
}
function repeat_1() {
repeat_btn.querySelector("img").src = "static/img/repeat.png"
isRepeat = 1
}
function repeat_2() {
repeat_btn.querySelector("img").src = "static/img/repeat-active.png"
isRepeat = 2
}
function repeat_3() {
repeat_btn.querySelector("img").src = "static/img/repeat1.png"
isRepeat = 3
}
