在 Django 中使用输入范围值更改图像大小

Question

我正在尝试创建一个范围字段，只要用户更改其值，它就会作为图像的大小插入。

{% 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 行中，这将是图像大小，总是返回为空。它似乎不存在，但我不知道为什么。

Answer 1

我发现了问题，获取图片的高度，代码是img.height，不是img.style.height