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

在添加eventlistener之前，请等待窗口加载

 window.onload = function() {
   var slider = document.getElementById("myRange");
   var output = document.getElementById("demo");
   output.innerHTML = slider.value;

   slider.oninput = function() {
     output.innerHTML = this.value;
   }
 }

Answer 2

您可以执行以下操作：

window.onload = function() {
  var container = document.getElementsByClassName('slidecontainer')[0];
  var slider = document.createElement("input");
  slider.type = 'range';
  slider.value = 56;
  container.prepend(slider);

  var output = document.getElementById("demo");
  output.innerHTML = slider.value;

  slider.oninput = function() {
    output.innerHTML = this.value;
  }
}

<div class="slidecontainer">
  <p>Value: <span id="demo"></span></p>
</div>

小心！您必须将创建的元素添加到容器中，否则那里没有任何元素。有关更高级的onload方法，请参见this topic

我希望这会有所帮助：）

编辑：

我认为您必须在for循环之外附加事件，并指定哪个元素必须具有什么功能。我使用以下代码段来做到这一点：

window.onload = function() {
  function addClass(element, class_name) {
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
      element.className += " " + class_name;
    }
  }

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

  for (var i = 0; i < titles.length; i++) {
    var container = document.getElementsByClassName('slidecontainer')[0];
    var slider = document.createElement("input");
    slider.type = 'range';
    slider.value = Math.random() * 100;
    slider.setAttribute('data-lable-id', titles[i]);
    addClass(slider, 'range-sliders');
    container.prepend(slider);
    container.innerHTML += ("<p>Value: <span id=" + titles[i] + "></span></p>")

    var output = document.getElementById(titles[i]);
    output.innerHTML = slider.value;
  }

  var sliders = document.getElementsByClassName('range-sliders');
  var i;
  for (i = 0; i < sliders.length; i++) {
    (function(i) {
      var lbl_id = sliders[i].getAttribute('data-lable-id');
      if (lbl_id) {
        sliders[i].oninput = function() {
          document.getElementById(lbl_id).innerHTML = this.value;
        };
      }
    })(i);
  }
}

<div class="slidecontainer">

</div>

Answer 3

根据您的修改，这是您的答案：

window.onload = function() {
  document.querySelectorAll(".slidecontainer").forEach(function(element) {
    var slider = [...element.children].filter(x=> x.tagName == "INPUT")[0];
    var output = [...element.children].filter(x=> x.tagName == "P")[0];
    slider.oninput = function() {
      output.innerHTML = this.value;
    }
  });

}

代码将查找具有类slidecontainer的每个div，并且将使用第一个输入和第一个p元素，其余代码是相同的

更好的代码和div是：

<div class="slidecontainer">
    <input class="slider" type="range" min="1" max="100" value="50" class="slider" id="myRange">
    <br>  
    <span>Value:</span><span class="slider-value"></span>
</div>

<script>
window.onload = function() {
  document.querySelectorAll(".slidecontainer").forEach(function(element) {
    var slider = [...element.children].filter(x=> x.className == "slider")[0];
    var output = [...element.children].filter(x=> x.className == "slider-value")[0];
    slider.oninput = function() {
      output.innerHTML = this.value;
    }
  });
}
</script>

此代码将找到slidecontainer div并检查具有slider类的输入，并将输入值写入具有slider-value类的元素

动态添加带有值的输入滑块

3 个答案: