从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(){&nbsp; document.getElementById("{{ slider['value_id'] }}").innerHTML = this.value;}