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

Question

我想根据{{ sliders }}flask应用程序输入的python字典创建具有值输出的动态数量的滑块。到目前为止，我已经想出了这段代码来显示滑块，但是在每个滑块下方显示它们的当前值不起作用。JS 脚本只会显示每个滑块的默认值，而不是它们当前的值。为什么会这样以及如何解决？<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;

}