动态添加带值的输入滑块

Question

我的目标是能够通过 javascript 将范围输入动态添加到网页上。我正在为滑块使用以下代码

<div class="slidecontainer">

    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

    <p>Value: <span id="demo"></span></p>

</div>

<script>

    var slider = document.getElementById("myRange");

    var output = document.getElementById("demo");

    output.innerHTML = slider.value;

    slider.oninput = function() {

        output.innerHTML = this.value;

    }

</script>

https://www.w3schools.com/howto/howto_js_rangeslider.asp

我曾尝试使用 innerHtml、document.createElement("input") 和模板来实现这一点。我能够绘制滑块，但是我无法获得要打印的值并显示有关如何实现此目标的任何帮助将不胜感激。

这是我最近的尝试

脚本

function showContent() {

  var temp = document.getElementsByTagName("template")[0];

  var clon = temp.content.cloneNode(true);

  document.body.appendChild(clon);

}

Template.myTemplate.rendered = function(){

document.getElementById("slider").oninput = function() {

    myFunction()

};

function myFunction() {

   var val = document.getElementById("slider").value //gets the oninput value

   document.getElementById('output').innerHTML = val //displays this value to the html page

   console.log(val)

}

</script>

<template name="myTemplate">

 <input id="slider" type="range" min="50" max="100" step="10"  value="50">

 <output id="output">abc</output>

</template>

<button class = "button" onclick="showContent()">Copy text</button>

由于 MMDM，我也尝试了这个，这导致显示了 3 个范围绘图和 3 个值，但是，它们没有更新。

<script>

window.onload = function() 

{

var titles = ["demo1", "demo2", "demo3"];

for(var i = 0; i < 3; i++)

{

  var container = document.getElementsByClassName('slidecontainer')[0];

  var slider = document.createElement("input");

  slider.type = 'range';

  slider.value = 50;

  container.prepend(slider);

  container.innerHTML += ("<p>Value: <span id=" + titles[i] +"></span></p>")

  var output = document.getElementById(titles[i]);

  output.innerHTML = slider.value;

  slider.oninput = function() {

    output.innerHTML = this.value;

  }

}

}

</script>

<div class="slidecontainer">

</div>

Answer 1

您可以执行以下操作：window.onload = function() {&nbsp; var container = document.getElementsByClassName('slidecontainer')[0];&nbsp; var slider = document.createElement("input");&nbsp; slider.type = 'range';&nbsp; slider.value = 56;&nbsp; container.prepend(slider);&nbsp; var output = document.getElementById("demo");&nbsp; output.innerHTML = slider.value;&nbsp; slider.oninput = function() {&nbsp; &nbsp; output.innerHTML = this.value;&nbsp; }}<div class="slidecontainer">&nbsp; <p>Value: <span id="demo"></span></p></div>当心！您必须将创建的元素添加到容器中，否则那里没有元素。有关更高级的onload方法，请参阅此主题我希望它有帮助:)编辑：我认为您必须在 for 循环之外附加事件并指定哪个元素必须具有什么功能。我用下面的代码片段来做到这一点：window.onload = function() {&nbsp; function addClass(element, class_name) {&nbsp; &nbsp; arr = element.className.split(" ");&nbsp; &nbsp; if (arr.indexOf(name) == -1) {&nbsp; &nbsp; &nbsp; element.className += " " + class_name;&nbsp; &nbsp; }&nbsp; }&nbsp; var titles = ["demo1", "demo2", "demo3"];&nbsp; for (var i = 0; i < titles.length; i++) {&nbsp; &nbsp; var container = document.getElementsByClassName('slidecontainer')[0];&nbsp; &nbsp; var slider = document.createElement("input");&nbsp; &nbsp; slider.type = 'range';&nbsp; &nbsp; slider.value = Math.random() * 100;&nbsp; &nbsp; slider.setAttribute('data-lable-id', titles[i]);&nbsp; &nbsp; addClass(slider, 'range-sliders');&nbsp; &nbsp; container.prepend(slider);&nbsp; &nbsp; container.innerHTML += ("<p>Value: <span id=" + titles[i] + "></span></p>")&nbsp; &nbsp; var output = document.getElementById(titles[i]);&nbsp; &nbsp; output.innerHTML = slider.value;&nbsp; }&nbsp; var sliders = document.getElementsByClassName('range-sliders');&nbsp; var i;&nbsp; for (i = 0; i < sliders.length; i++) {&nbsp; &nbsp; (function(i) {&nbsp; &nbsp; &nbsp; var lbl_id = sliders[i].getAttribute('data-lable-id');&nbsp; &nbsp; &nbsp; if (lbl_id) {&nbsp; &nbsp; &nbsp; &nbsp; sliders[i].oninput = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(lbl_id).innerHTML = this.value;&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })(i);&nbsp; }}<div class="slidecontainer"></div>

Answer 2

在添加事件侦听器之前等待窗口加载&nbsp;window.onload = function() {&nbsp; &nbsp;var slider = document.getElementById("myRange");&nbsp; &nbsp;var output = document.getElementById("demo");&nbsp; &nbsp;output.innerHTML = slider.value;&nbsp; &nbsp;slider.oninput = function() {&nbsp; &nbsp; &nbsp;output.innerHTML = this.value;&nbsp; &nbsp;}&nbsp;}

Answer 3

根据您的编辑，这是您的答案：window.onload = function() {&nbsp; document.querySelectorAll(".slidecontainer").forEach(function(element) {&nbsp; &nbsp; var slider = [...element.children].filter(x=> x.tagName == "INPUT")[0];&nbsp; &nbsp; var output = [...element.children].filter(x=> x.tagName == "P")[0];&nbsp; &nbsp; slider.oninput = function() {&nbsp; &nbsp; &nbsp; output.innerHTML = this.value;&nbsp; &nbsp; }&nbsp; });}代码会找到每个有类的 divslidecontainer并且它会取第一个输入和第一个 p 元素，其余的代码是一样的更好的代码和 div 是：<div class="slidecontainer">&nbsp; &nbsp; <input class="slider" type="range" min="1" max="100" value="50" class="slider" id="myRange">&nbsp; &nbsp; <br>&nbsp;&nbsp;&nbsp; &nbsp; <span>Value:</span><span class="slider-value"></span></div><script>window.onload = function() {&nbsp; document.querySelectorAll(".slidecontainer").forEach(function(element) {&nbsp; &nbsp; var slider = [...element.children].filter(x=> x.className == "slider")[0];&nbsp; &nbsp; var output = [...element.children].filter(x=> x.className == "slider-value")[0];&nbsp; &nbsp; slider.oninput = function() {&nbsp; &nbsp; &nbsp; output.innerHTML = this.value;&nbsp; &nbsp; }&nbsp; });}</script>此代码将查找slidecontainerdiv 并检查具有slider类的输入并将输入值写入具有slider-value类的元素