javascript - 从 python 列表创建 html 中动态数量的 slider 并使用 javascript 显示值？

Question

我想根据 Flask 应用程序输入的 Python 字典 {{ sliders }} 创建动态数量的 slider ，并输出值。

到目前为止，我已经想出了此代码来显示 slider ，但在每个 slider 下方显示其当前值不起作用。

JS 脚本只会显示每个 slider 的默认值，而不是当前值。这是为什么以及如何解决它？

<div class="content-section">
        <form method="POST" action="{{url_for('deployment')}}">
            <fieldset class="form-group">
                {% for slider in sliders %}
                    <div class="slidecontainer">
                        <p>{{ slider['name'] }}</p>
                        <input type="range" min="{{ slider['min'] }}" max="{{ slider['max'] }}" step="{{ slider['step'] }}" class="slider" id="{{ slider['slider_id'] }}" name="{{ slider['name'] }}">
                        <p>Value: <span id="{{ slider['value_id'] }}"></span></p>
                    </div>
                {% endfor %}
            </fieldset>
            <input type="submit" value="Submit" />
        </form>

        {% for slider in sliders %}
            <script>
            var slider = document.getElementById("{{ slider['slider_id'] }}");
            var output = document.getElementById("{{ slider['value_id'] }}");
            output.innerHTML = slider.value;

            slider.oninput = function() {
              "{{ slider['value_id'] }}".innerHTML = this.value;
            }
            </script>
        {% endfor %}

    </div>

Answer 1

你错过了

document.getElementById()

在oninput函数中。

应该是

slider.oninput = function()
{
  document.getElementById("{{ slider['value_id'] }}").innerHTML = this.value;
}