JS & Django- Как получить доступ к значению из тега H1 с помощью DOM? Я не получаю ответа от JS

Я передаю целочисленное значение в HTML-шаблон, и хочу получить к нему доступ до того, как оно будет показано пользователю. Вот код:

status.html

<div id="frame_body">
                <div id="percentage"><h1 id="receivedVal">{{projects.phase}}<sup>%</sup></h1></div>
                <div id="proj-name"><p>XXXXXXXXXXX</p></div>
                <div id="name-of-staff-head"><p>Supervised by Mr. X</p></div>
                <div id="temporary">
                    <!-- <p>Status -{{projects.status}}</p> <br>
                    <p>Phase -{{projects.phase}}</p> <br>
                    <p>Collaborators -{{projects.collab}}</p>  -->
                </div>
            </div>

JS:

function showPercentage(){
            var phase_no = document.getElementById("receivedVal").value;

            var percentage = (phase_no / 10) * 100;

            document.getElementById("receivedVal").innerHTML = percentage;
}

Как видно из кода, я хочу выполнить это вычисление и вернуть новое значение. Как я могу это сделать?

class Project(models.Model):
    ...
    phase = models.CharField(max_length=100,null=True, choices=PHASE)
    ...

    @property
    def phase_percentage(self):
        return self.phase * 10

{{ projects.phase_percentage }}