Javascript 是否可以使用HTML滑块'；s的初始值取决于一个变量？

我对编程非常缺乏经验（这当然说明了这一点），我在尝试在网站上编写应用程序时遇到了一个特殊的问题。具体地说，用户输入存储在决策表中的一系列数字，这些数字最终会被重新访问。数字是通过滑块输入的，我希望“重访您的决定”滑块从先前记录的值开始

实际上，假设初始数字输入存储为变量“start”。我目前拥有的代码是：（注意，我不确定到底什么是相关的，所以我是过度粘贴，而不是粘贴不足。对于那些知识更丰富的人，请随意将其大幅减少到最低限度的工作示例。）

HTML:

我再次感到抱歉，我确信那里有很多无用的信息！！我已经尝试了所有我能想到的方法，用几乎所有我能想到的（“b1”、“开始”等）来关闭

value=“startvalue”

，但显然没有任何效果

如果有什么不清楚的地方（除了意大利面条代码本身，很有可能），请告诉我，我可以试着澄清！）（我也可以试着澄清代码，但还是很害怕破坏它哈哈）

我还将其复制到了codepen（la@ouchane.exe的建议！），它在这里：

---

谢谢你的帮助

我试图尽可能地简化它，以便让您清楚地了解其机制

起始值：
5.
体积值：
slider=document.getElementById（“vol”）；
sliderval=document.getElementById（“val”）；
函数滑块_init（）{
startvalue=document.getElementById（“startvalue”）；
slider.value=startvalue.innerHTML；
sliderval.innerHTML=slider.value；
}
函数滑块_集（）{
sliderval.innerHTML=slider.value；
}
slider.addEventListener（'input'，slider\u set）；
slider_init（）

Hi，函数getValue（）未定义，请在codepen中画笔也许我可以帮助：）Hi ouchane.exe，非常感谢！！我在web应用程序中添加了代码，尽管我担心在这种情况下可能没有多大帮助。（我使用的网站基本上是用于调查和心理/经济实验的。参与者已经输入了一个数量，它被保存在一个sql表中（也许？我真的不确定哈哈），它被保存为'amount'变量。）再次，如果这没有多大帮助，我很抱歉，但是让我知道，我可以尝试修复它！我很抱歉我的无能！！哈哈，我有很多要点可以帮助您改进代码1-使用document.querySelector并使用（#或）传递id或类的名称如果您想更改输入的值或任何元素的值，请使用.value=而不是getElementById 2-在声明中使用var或better that nothing 3-我希望这能帮助您解决问题，我不怀疑！另外，我很抱歉，我刚刚意识到你的意思是使用网站代码笔哈哈。链接是，我会把它添加到上面的问题的主体！谢谢你的提示，我会尽快浏览并尝试！！我相信你应该能够简单地说

sliderElement.value=“50”

您应该能够用您想要的任何数字替换

50

。还是我遗漏了什么？这里有一篇文章准确地描述了您所寻找的内容：（）哦，谢谢您的回答（以及非常简化的代码！）我认为这是可行的，但我只想在接受之前检查一下：如果我有一个Javascript代码中定义的值（假设它是一个名为“test”（不带引号）的变量），并且它等于0到10之间的值，我可以让起始值id调用该值吗？如果是，怎么做？（再次为我的无知感到抱歉！）谢谢！！理论上，您可以在HTML中获取和设置任何内容

startvalue.innerHTML=test.innerHTML

或

startvalue.value=test.value

如果元素具有“value”属性。要直接将滑块的初始值设置为5，请使用：

我认为这样做有效！！非常感谢你！！

<br>
<meta name="viewport" content="width=device-width, initial-scale=2">
<style>
.responsive {
    width: auto;
    height: auto;
}
.slidecontainer {
margin-left: 10%;
margin-right: 25%;
    width: 75%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
}

.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #ff6347;
    cursor: pointer;
}

.slider {
    -webkit-appearance: none;
    width: 80%;  /* <-- Problem was here when width is 100% */
    height: 15px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.sliderticks {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
}

.sliderticks p {
  position: relative;
  display: flex;
  justify-content: center;
  text-align: center;
  width: 2px;
  background: #D3D3D3;
  height: 10px;
  line-height: 40px;
  margin: 0 0 20 0;
}

</style>

Use the slider to input a new value for x below:

<div class="slidecontainer" style="margin-left:auto;margin-right:auto;"><table>  <tbody><tr><td></td><td style="text-align:center;"><h3><br><b>Value 1</b>: <span id="demo"></span></h3><h3><b>10-Value 1</b>: <span id="demo2"></span></h3> </td> <td></td></tr>
<tr><td style="padding-right: 10px;">Slider 0</td><td style="min-width: 700px;">
  <input type="range" min="0" max="10" value="startvalue" class="slider" id="myRange" step="0.25"></td><td style="padding-left: 10px;">Slider 10</td></tr>  
  <tr><td></td><td><div class="sliderticks">
    <p>0</p>
    <p>1</p>
    <p>2</p>
    <p>3</p>
   <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
   <p>10</p></div></td><td></td></tr> 
  
</tbody></table>
</div>

start=getValue('decisions', 'PlayerNr='+ playerNr +' and period='+period, 'amount'); //There is code inside the parentheses that grabs this value from a table
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var output2 = document.getElementById("demo2");
var output3 = document.getElementById("startvalue");
output.innerHTML = slider.value;
output2.innerHTML = 10-slider.value;
output3.innerHTML = b1;
b1=start;

slider.oninput = function() {
output.innerHTML = this.value; // display value A in HTML
b1=this.value; // value A
b2=10-(b1); // value B
output2.innerHTML = b2; // display value B in HTML
revisit=b1;
record('revisit',revisit);
};