第二个range滑块无法输出数值，请求排查原因

问题原因分析 #

• ID不匹配：第二个滑块HTML里的ID是month_inv，但JS函数slider_value2里却在找myRange2，找不到元素自然没法更新数值。
• 事件名错误：JS里用了不存在的oninput2事件，滑块的标准输入事件是oninput，这个错误导致滑动时不会触发更新逻辑。
• 回调值错误：事件回调里直接用传入的value参数，这个值是初始触发时的固定值，滑动时不会实时变化，应该用this.value获取当前滑块的实时数值。
• 未定义变量：slider_value2函数里直接使用slider2变量，但没提前定义，会引发报错中断执行。

修复后的代码 #

JavaScript代码

function slider_value(value) {
  const slider = document.getElementById("myRange");
  const output = document.getElementById("demo");

  // 初始化显示当前值
  output.innerHTML = slider.value;

  // 绑定滑块输入事件，实时更新数值
  slider.oninput = function () {
    output.innerHTML = this.value;
    value_name(this.value);
  }
}

function slider_value2(value) {
  // 匹配HTML里的正确ID：month_inv
  const slider = document.getElementById("month_inv");
  const output = document.getElementById("demo2");

  // 初始化显示当前值
  output.innerHTML = slider.value;

  // 使用正确的oninput事件
  slider.oninput = function () {
    output.innerHTML = this.value;
    value_name(this.value);
  }
}

// 根据滑块值执行逻辑的函数
function value_name(value) {
  if (parseInt(value) === 50000) {
    alert("I am 50,000");
  }
}

HTML代码

<section <?php theme_section_attr_id() ?>
  <?php theme_section_attr_class( 'pb-5' ) ?>>
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-8 showdow">
        <div class="row p-5 pb-0">
          <div class="pb-5">
            <p class="m-0 p-0"><strong>Number of Employees <span id="demo" style="float: inline-end;color: #00AFAB;"></span></strong></p>
            <div class="slidecontainer">
              <input
                id="myRange"
                type="range"
                min="50"
                max="50000"
                value="50"
                class="slider no_emp" 
                oninput="slider_value(this.value)" 
                onchange="slider_value(this.value)">
            </div>
            <p class="m-0 p-0">50 <span  style="float: inline-end;">50,000</span></p>
          </div>
          <div>
            <p class="m-0 p-0"><strong>Monthly Investigations <span id="demo2" style="float: inline-end;color: #00AFAB;"></span></strong></p>
            <div class="slidecontainer">
              <input
                id="month_inv"
                type="range"
                min="10"
                max="1000"
                value="10"
                class="slider"
                oninput="slider_value2(this.value)" 
                onchange="slider_value2(this.value)">
            </div>
            <p class="m-0 p-0">10 <span  style="float: inline-end;">1,000</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

注：同时清理了HTML里重复的Number of Employees标签，避免冗余结构。

内容的提问来源于stack exchange，提问作者Beep