将输入值插入标签文本Javascript

Question

我有3个量程输入：

当用户开始拖动范围拇指时，我希望相关输入值的值在主文本之前打印在标签中。为此，我写了一篇文章，但没有什么能起作用

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

Answer 1

看看这个片段，我想它符合你的目的：

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>