Javascript Html/Js输入范围对象动态加载到div don'；t工作

嗨，我有一个隐藏的div，里面有一个范围：

<div id="hiddencontainer" style="display:none;">
  <input id="range1" type="range" min="1" max="10" step="1" name="rating"   value="1" onmousemove="showrangevalue()"/>
</div>

你有解决办法吗？谢谢你的帮助

看看这个

您正在复制

容器

中的

范围

元素，因此有两个具有相同ID的范围输入

这将显示

.value

div中隐藏元素中的值。将其替换为类，然后可以使用它

HTML:

<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
  <input class="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">

</div>
value:
<div id="value">

</div>

<input type="button" value="Showing range" onClick="showhiddencontainer()"></input>

试着替换

function showhiddencontainer(){
  document.getElementById("container").innerHTML=
  document.getElementById("hiddencontainer").innerHTML;
}

与

除非你有理由复制你的容器

<div id="hiddencontainer" style="display:none;"><!-- try without display none -->
  <input class="range1" type="range" min="1" max="10" step="1" name="rating" value="1" onmousemove="showrangevalue()"/>
</div>
<div id="container">

</div>
value:
<div id="value">

</div>

<input type="button" value="Showing range" onClick="showhiddencontainer()"></input>

function showrangevalue(){
  document.getElementById("value").innerHTML=document.querySelectorAll(".range1")[1].value;

}
function showhiddencontainer(){
  document.getElementById("container").innerHTML=document.getElementById("hiddencontainer").innerHTML;
}

function showhiddencontainer(){
  document.getElementById("container").innerHTML=
  document.getElementById("hiddencontainer").innerHTML;
}

function showhiddencontainer(){
    document.getElementById("hiddencontainer").style.display = "block"; 
}