Question

嗨我有一个隐藏的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>

此范围在直接显示时工作正常但我需要隐藏此范围并在用户单击特定按钮时显示该范围。

问题是，在用户点击“显示范围”按钮后，显示范围但无法读取其值。

jsbin上的演示和完整代码： http://jsbin.com/voyilovuya/3/

HTML

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

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

</div>

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

JS

function showrangevalue(){
  document.getElementById("value").innerHTML=document.getElementById("range1").value;

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

你有解决方案吗？谢谢你的帮助！

Answer 1

请参阅此http://jsfiddle.net/g03srawu/1/，

您正在重复range中的container元素，因此有两个范围输入具有相同的ID，

这将显示.value div中隐藏元素的值。用class替换它，然后你可以使用它。

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

JS：

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

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

Answer 2

尝试替换

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

带

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

除非您有理由将容器复制过来？

在div中动态加载的Html / Js输入范围对象不起作用

2 个答案: