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

Question

So I'm a newbie programmer and I've made a simple form in HTML and CSS, with two inputs (type:"range"). Using Javascript, I've been struggling to figure out how the two values from these two inputs can be made to change/manipulate a coloured background of a div-bar with values ranging from 0-24.

Please, any help with suggestions, solutions or links to useful resources will be appreciated. Thank you!

So far I've figured out how to display text data by making the submit button add innerHTML to another element, but time, dates and slider values are only displaying in the URL, not the paragraph element or even the console. When calling the function I first tried using the id for the parenting form tag, when that failed to log the numbers, I tried using all the IDs for the individual input-tags in the function instead. Now nothing is displaying and the console message is disappearing so fast that I can't see the error-message, if there is one. I don't know how to get the numbers to display, let alone connect those values to the div-bar I've made, and after a number of tutorials my brain is too crispy to think.

Please, any help with suggestions, solutions or links to useful resources will be appreciated. Thank you! [ HTML display + output in URL field ]( https://i.stack.imgur.com/Cd5Op.png )

Answer 1

You can save value of your slider in a variable and further work with it. Hope this example helps:

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