Изменение размера изображения с помощью вводимого диапазона значений в Django

Я пытаюсь сделать поле диапазона, которое каждый раз, когда пользователь изменяет его значение, вставляется как размер изображения.

{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load crispy_forms_tags %}

{% block conteudo %}
<script>

function updateTextInput()
{
        var value = document.getElementById("range").value;

        var img = document.getElementById('imageRange');

        img.style.height = value

        updateTextInput()
}

function SetSize(porte){

var tamanho;

    switch (porte){
        case 'pequeno':
            tamanho = 40
        break;
        case 'medio':
            tamanho = 80
        break;
        case 'grande':
            tamanho = 120
        break;
    }

    document.getElementById("range").value = tamanho;
    updateTextInput();

}

</script>

<! -- page content ... -- >

<form enctype="multipart/form-data" action="submit", method="POST">{% csrf_token %}
        <input type="number" class="form-control" name="pet-id" value="{{ pet.id }}" hidden>
        <div class="container">
<div class="form-group">
        <label><b>{% trans "Porte" %}</b>:</label><br>
        <button class="btn btn-primary" style="color:black; font-size:70%" onclick="SetSize('pequeno')" type="submit" value="Submit">Pequeno porte</button>
        <button class="btn btn-primary" style="color:black; font-size:70%" onclick="SetSize('medio')" type="submit" value="Submit">Médio porte</button>
        <button class="btn btn-primary" style="color:black; font-size:70%" onclick="SetSize('grande')" type="submit" value="Submit">Grande porte</button><br><br>
                
        <table class="fixed">
                <tr>
                        <td><img src="https://cdn.pixabay.com/photo/2018/03/30/13/04/silhouette-3275316_960_720.png" height="150" /></td>
                        <td style="vertical-align:bottom"><img id="imageRange" src="https://image.flaticon.com/icons/png/512/91/91544.png" height="80" /></td>
                </tr>
        </table>
        <input class="form-range" style="width:30%" id="range" type="range" min="40" step="0" max="120" oninput="updateTextInput();" >
</div>

Код в изолированном файле работает отлично. Однако при включении его в шаблон Django он не работает.

Я протестировал и функции выполняются, но в строке img.style.height, где должен быть размер изображения, всегда возвращается значение null. Кажется, что его нет, но я не знаю почему.

Вернуться на верх