3

How to display input value on the website? I already tried to display it but when I change the value of the input, the display is still the same.

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");

valueInp.innerHTML = rangeInput.value;
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65

5 Answers5

1

What you did puts the value of the input in the paragraphe on load. Plus you need an EventListener in order to track the input changes, like so: 

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
valueInp.innerHTML = rangeInput.value;
rangeInput.addEventListener("input", ()=>{
 valueInp.innerHTML = rangeInput.value;
})
<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
1
const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
rangeInput.addEventListener("input", () => {
  valueInp.textContent = rangeInput.value;
});
valueInp.textContent = rangeInput.value;

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>```
1

Provided that the <p> element for the value will always be following directly after your range element then the following script will take care of any number of range/value combinations:

document.querySelectorAll(".range")
.forEach(r=>r.addEventListener("input",update(r)));

function update(r){
  const ur= ()=>r.nextElementSibling.textContent=r.value;
  ur();
  return ur;
}
<input type="range" min="1" max="100" value="40" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="20" step="1" class="range"/>
<p></p>
<input type="range" min="1" max="100" value="30" step="1" class="range"/>
<p></p>
Carsten Massmann
  • 26,510
  • 2
  • 22
  • 43
0

Try this :

<input type="range" min="1" max="100" value="1" step="1" class="range"/>
<p class="value"></p>

const rangeInput = document.querySelector(".range");
const valueInp = document.querySelector(".value");
range.addEventListener("change",()=>{
   valueInp.innerHTML = rangeInput.value;
})
valueInp.innerHTML = rangeInput.value;

addEventListener here will be executed whenever value inside input tag is changed .

Hritik Sharma
  • 1,756
  • 7
  • 24
  • Yep, this code works too but is there anyway, to make value change while we move a circle –  Mar 12 '22 at 07:58
-1
  • You need to wire-up an event-listener on the <input/> which then updates the <p class="value"> in the event-handler.
  • You can only wire-up event-handlers after DOMContentLoaded btw.
  • There are two main events you can listen to:
    • Use the 'input' event to respond to every change-in-value, even while the <input> element has focus.
    • Use the 'change' event to only respond to changes when the user has stopped interacting with the input.
  • BTW, you should use an <output> element instead of <p> for showing "output" values.
  • You should use id to select specific elements instead of .className selectors because class="" is not unique.
  • Never use innerHTML for showing text as it opens you up to XSS attacks.
    • For <output> you can set HTMLOutputElement.value.
    • For all other elements, use textContent.
    • Or innerText.

Like so:

window.addEventListener( 'DOMContentLoaded', onDomLoaded );

function onDomLoaded() {

    const rangeInput = document.getElementById('myRangeInput');
    const output     = document.getElementById('myOutput');

    // Show initial value immediately:
    output.textContent = rangeInput.value;

    // 'input' is the name of the event-type, not the <input> element name.
    // you can also use 'change' instead.
    rangeInput.addEventListener( 'input', e => {
        output.textContent = rangeInput.value;
    } );
}
<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" class="range"/>
<output id="myOutput" for="myRangeInput"></output>

If you want something really succinct, then just update the <output> dire use a named <output> the oninput="" attribute, like so:

<input id="myRangeInput" type="range" min="1" max="100" value="1" step="1" oninput="document.getElementById('myOutput').value = this.value;" />
<output id="myOutput" for="myRangeInput"></output>
Dai
  • 141,631
  • 28
  • 261
  • 374
  • Hello, i have a question with your code, why we add event on window? –  Mar 12 '22 at 08:06
  • @Excortia Because you cannot (reliably) use `getElementById` before the `DOMContentLoaded` event has fired. – Dai Mar 12 '22 at 08:10