Insert Input Value into Label Text Javascript

Question

I have 3 range inputs:

When the user starts to drag the range thumb, I'd love the of related input value to be printed in the label before main text. For this I wrote a funtion, but nothng works

let rangeForm = document.querySelectorAll('.form-range');
let rangeValue = document.querySelectorAll('.input-value');

window.onload = () => {
  rangeForm.forEach((input) => input.value = '0');
}

function findTotal() {
  var tot = 0;
  rangeForm.forEach((input) => tot += parseInt(input.value, 10));
  document.getElementById('total-cost').innerHTML = tot;
}

function changeLabel() {
  rangeValue.forEach((label) => label.inhherHTML = `${parseInt(input.value, 10)}`);
}

<label for="storiesNumber" class="form-label"><p class="input-value"></p>some text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="storiesNumber">
<label for="postsNumber" class="form-label"><p class="input-value"></p>another text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="postsNumber">
<label for="reelsNumber" class="form-label"><p class="input-value"></p>more text</label>
<input type="range" oninput="findTotal();changeLabel()" class="form-range" min="0" max="100" id="reelsNumber">

First thing to do, open the browser's console and check for error messages. — Kostas Minaidis
– Kostas Minaidis, Commented May 19, 2021 at 11:59
TypeError : document.getElementById('total-cost') is null because you do not have any element with ID total-cost and ReferenceError: input is not defined in ${parseInt(input.value, 10)}. additionally, you probably meant label.innerHTML and not label.inhherHTML … — TheEagle
– TheEagle, Commented May 19, 2021 at 12:05
total cost works, I just didn't insert this bit of code, cause it is not relevant for my question. I get an erro, that input is not defined — Katharina Schreiber
– Katharina Schreiber, Commented May 19, 2021 at 12:08

stacj · Accepted Answer · 2021-05-19 12:12:05Z

Check out this snippet, I guess it fits your purpose:

let rangeForm = document.querySelectorAll('.form-range');
let rangeValue = document.querySelectorAll('.input-value');

window.onload = () => {
  rangeForm.forEach((input) => input.value = '0');
}

function findTotal() {
  var tot = 0;
  rangeForm.forEach((input) => tot += parseInt(input.value, 10));
  document.getElementById('total-cost').innerHTML = tot;
}

function changeLabel(input) {
  document.querySelector("label[for="+input.id+"] > .input-value").innerText = `${parseInt(input.value, 10)}`
}

<label for="storiesNumber" class="form-label">
  some text: <b class="input-value"></b> 
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="storiesNumber">
<br>
<label for="postsNumber" class="form-label">
  another text: <b class="input-value"></b>
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="postsNumber">
<br>
<label for="reelsNumber" class="form-label">
  more text: <b class="input-value"></b>
</label>
<input type="range" oninput="findTotal();changeLabel(this)" class="form-range" min="0" max="100" id="reelsNumber">
<br>
Total: <b id="total-cost">...</b>

Collectives™ on Stack Overflow

Insert Input Value into Label Text Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related