Question

我想根据烧瓶应用程序提供的python字典{{ sliders }}创建动态数量的滑块，并根据其输出的值来创建滑块。

到目前为止，我已经拿出了这段代码来显示滑块，但是在每个滑块下面显示它们的当前值不起作用。

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;
}

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

1 个答案: