I wanted to change the "Lessons" into the "Songs", as 0 of 22 dynamic value it will increment as someone clicks the button. I've tried with this code but it isn't incrementing the number:
setInterval(() => {
if ($('#completion-count').length && !$('.completion_count_no_repeat').length) {
$('#completion-count').empty();
$("#completion-count").append(`<span id="completion-count" class="font-semibold">0 of 22 Songs Completed</span>`);
}
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="completion-count" class="font-semibold">0 of 22 Lessons Completed</span>
You are not incrementing the number.
You need to keep count of the last number and then format it into the string:
let index = 0;
setInterval(() => {
if ($('#completion-count').length && !$('.completion_count_no_repeat').length) {
$('#completion-count').empty();
$("#completion-count").append(`<span id="completion-count" class="font-semibold">${index} of 22 Songs Completed</span>`)
}
index++;
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="completion-count" class="font-semibold">0 of 22 Lessons Completed</span>
The curly braces in the string are for templating. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)