How to display input value on page in Javascript?-CodePudding

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" />
<p ></p>

CodePudding user response：

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" />
<p></p>
<input type="range" min="1" max="100" value="20" step="1" />
<p></p>
<input type="range" min="1" max="100" value="30" step="1" />
<p></p>

CodePudding user response：

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" />
<p ></p>

CodePudding user response：

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" />
<p ></p>```

CodePudding user response：

Try this :

<input type="range" min="1" max="100" value="1" step="1" />
<p ></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 .

CodePudding user response：

You need to wire-up an event-listener on the <input/> which then updates the <p > 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 is not unique.
Never use innerHTML for showing text as it opens you up to XSS attacks.
- Use textContent instead.

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" />
<output id="myOutput" for="myRangeInput"></output>