JS：我如何提交两个单独的值（表单）并将它们显示在 0-24 小时范围内的条形图中（例如，选择了 6 和 12 - 中间小时变为红色

Question

所以我是一个新手程序员，我在 HTML 和 CSS 中制作了一个简单的表格，有两个输入（类型：“范围”）。 使用 Javascript，我一直在努力弄清楚如何使用这两个输入的两个值来更改/操作值范围为 0-24 的 div-bar 的彩色背景。

请提供任何有关建议、解决方案或有用资源链接的帮助，我们将不胜感激。 谢谢！

到目前为止，我已经弄清楚如何通过将提交按钮添加 innerHTML 到另一个元素来显示文本数据，但是时间、日期和 slider 值仅显示在 URL 中，而不是段落元素甚至控制台。 调用 function 时，我首先尝试使用 id 作为育儿表单标签，但未能记录数字时，我尝试使用 function 中各个输入标签的所有 ID。 现在什么都没有显示，控制台消息消失得如此之快，以至于我看不到错误消息（如果有的话）。 我不知道如何显示数字，更不用说将这些值连接到我制作的 div-bar 了，在学习了一些教程之后，我的大脑太脆弱了，无法思考。

请提供任何有关建议、解决方案或有用资源链接的帮助，我们将不胜感激。 谢谢！ [ HTML 显示 + URL 字段中的 output ]( https://i.stack.imgur.com/Cd5Op.png )

Answer 1

您可以将 slider 的值保存在一个变量中并进一步使用它。 希望这个例子有帮助：

const slider = document.getElementById("myRange");
const sliderOutput = document.getElementById("slider-output"); // empty div to output text

sliderOutput.innerHTML = `<h1>${slider.value}</h1>`

// Update the current slider value (each time you drag the slider handle)
slider.oninput = () => {
  sliderOutput.innerHTML = `<h1>${slider.value}</h1>`
}