javascript - 范围控件在将它们放入表单后不再起作用（javascript）

Question

我写了一个简单的js代码来显示范围输入值：

output.innerHTML = slider.value;

function settings3_newDistance() {
    var slider = document.getElementById(
    "settings3_newDistance"
    ).value;
    document.getElementById(
    "settings3_newDistance_value"
     ).value = slider;
}

input type="range"当它不在表单内时，它可以完美地工作。在我将所有东西都包装成表格后，一切都突然停止了工作。我试图将提交按钮更改为

<button type="button" class="btn btn-primary">Submit</button>

我将按钮类型从更改submit为 just button。但它仍然不显示滑块/范围输入的当前值。控制台说：settings3_overallDistance is not a function，但它被定义为oninput="settings3_overallDistance()"范围/滑块输入属性。提前致谢。

编辑：

范围/滑块输入与输出框（值输出）代码：

    <div class="form-control">
        <span
          ><input
             id="settings3_modernisedDistance"
             name="settings[3][modernisedDistance]"
             value="0"
             min="0"
             max="100"
             step="1"
             type="range"
             oninput="settings3_modernisedDistance()"
             required=""
             class="form-control" /></span
           ><input
            type="text"
            id="settings3_modernisedDistance_value"
            value="0"
            placeholder="Distance"
            readonly="readonly"
           />
    </div>
<script>
  output.innerHTML = slider.value;

  function settings3_modernisedDistance() {
      var slider = document.getElementById(
        "settings3_modernisedDistance"
       ).value;
       document.getElementById(
         "settings3_modernisedDistance_value"
       ).value = slider;
       }
  </script>

现在代码形成表单的底部：

<div class="col-lg-12">
  <button type="reset" class="btn btn-default">
    Reset
  </button>
  <button type="button" class="btn btn-primary">
    Submit
  </button>
 </div>

标签： javascripthtmlformsdom