Javascript 如何在html中显示滑块值？

我最近一直在做一个项目，演示算术序列的使用。用户将使用滑块输入起始项的值，即t0；差异，即d；术语数，表示为n。但是，我无法让代码正常工作。我在这篇文章中使用了解决方案：。下面是我的代码演示：

var t0，差，boxedNums，numOfTerms，redCircle，redTriangle，redRectangle，blueCircle，blueTriangle，blueRectangle；
函数genTn（）{
重置（）；
t0=document.getElementById（“t0”）.value；
差异=document.getElementById（“d”）值；
numOfTerms=document.getElementById（“tn”）.value；
var-tn；
document.getElementById（'buildButton'）.style.display='none'；
对于（n=0；n'
插入+=''+tn+'
'
insert+=GetPicsRespresentofNumber（tn）；
插入+=“”
document.getElementById（“boxArea”）.innerHTML+=insert；
var msg=新演讲（tn）；
window.speechSynthesis.speak（msg）；
}
函数showButton（）{
document.getElementById（'buildButton'）。style.display=''；
}
函数重置（）{
document.getElementById（“boxArea”）.innerHTML=“”；
}
函数getPicsRepresentOfNumber（数字）{
var totalHund=0，
totalTens=0，
TotalOne=0，
returnHtml=''；
totalHund=Math.abs（parseInt（number/100））；
var diffAfterRemovingHund=数量%100；
totalTens=Math.abs（parseInt（diffAfterRemovingHund/10））；
totalone=Math.abs（parseInt（diffAfterRemovingHund%10））；
对于（变量i=0；i”；
对于（var i=0；i”；
对于（变量i=0；i”；
返回HTML；
}
函数更新0输入（t0）{
document.getElementById（“updatet0”）.value=t0；
}
函数updateInput（差异）{
document.getElementById（“更新”）。值=差异；
}
函数updateNInput（numOfTerms）{
document.getElementById（“updaten”）.value=numOfTerms；
}

.center{
文本对齐：居中；
}
#方程式{
背景颜色：浅绿色；
文本对齐：居中；
边界半径：10%；
}
身体{
背景颜色：浅蓝色；
}
#公式{
背景颜色：浅绿色；
}
.盒装{
边框：1px纯色灰色；
边缘顶部：10px；
背景颜色：米色；
}
.tn{
字号：3em；
}

作业10a2
公式：

tn=t0+d*n



t0=


d=


n=


生成

JSFiddle与您的代码片段：

以下是经过轻微修改的类名的HTML：

 t<sub>0</sub> = <span id="updatet0"></span>
  <input type="range" min="-50" max="50" value="0" id="t0" class="slider1" onchange="updateT0Input(this.value);">
  <p>Value: <span id="demo1"></span></p>
  <br>
  d = <span id="updated"></span>
  <input type="range" min="-50" max="50" value="0" id="d" class="slider2" onchange="updateDInput(this.value);">
  <p>Value: <span id="demo2"></span></p>
  <br>
  n = <span id="updaten"></span>
  <input type="range" min="1" max="20" value="10" id="tn" class="slider3" onchange="updateNInput(this.value);">
  <p>Value: <span id="demo3"></span></p>

确保用唯一的类名和id标识每个滑块。您需要将其重构为可编程的，并使用函数封装重复的逻辑

参考：

var output1 = document.getElementById("demo1");
output1.innerHTML = slider1.value;

slider1.oninput = function() {
  output1.innerHTML = this.value;
}

var slider2 = document.getElementById("d");
var output2 = document.getElementById("demo2");
output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

var slider3 = document.getElementById("tn");
var output3 = document.getElementById("demo3");
output3.innerHTML = slider3.value;

slider3.oninput = function() {
  output3.innerHTML = this.value;
}