如何在JavaScript中实现滑块与数字输入框的值相乘并展示

你的代码目前未关联数字输入框myinput的实时值，而是用固定值计算，同时缺少输入框变化的监听逻辑，这是核心问题。以下是修正后的实现方案：

问题分析 #

• inp6 = inp5.value仅在页面初始化时获取一次输入框值，后续输入框修改不会同步更新
• 当前计算使用固定值inp7=2，未与输入框myinput的值关联
• 没有给输入框添加事件监听，输入框内容变化时不会触发结果重新计算

修正后的代码 #

const range = document.getElementById("range"),
  rangeV = document.getElementById("rangeV"),
  inp5 = document.getElementById("myinput");

function setValue() {
  // 每次计算时获取输入框最新值，转为数字（空值/非数字默认取0，避免NaN）
  const inputValue = Number(inp5.value) || 0;
  const newValue = Number(
      ((range.value - range.min) * 100) / (range.max - range.min)
    ),
    newPosition = 10 - newValue * 0.2;
  // 滑块值与输入框值相乘
  const val1 = range.value * inputValue;
  rangeV.innerHTML = `<span>${val1}</span>`;
  rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
}

document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener("input", setValue);
// 给输入框添加监听，确保输入变化时同步更新结果
inp5.addEventListener("input", setValue);

关键修改点 #

• 移除固定值inp6和inp7，每次调用setValue时获取最新的输入框值
• 对输入框值做数字转换和空值处理，避免出现非数字结果
• 给myinput添加input事件监听，实现输入框与滑块的双向联动计算
• 改用声明式函数代替隐式全局箭头函数，避免作用域风险

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