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

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>

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

问题是用户点击"showing range"按钮后，显示范围但无法读取他的值。

jsbin上的demo和完整代码： 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/，

您正在复制 container 中的 range 元素，因此有两个具有相同 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"; 
}

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

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

Html/Js Input range object dynamically loaded inside a div don't works

javascript

html

css

dom

input