第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

動態(tài)添加帶值的輸入滑塊

動態(tài)添加帶值的輸入滑塊

ITMISS 2021-12-02 16:48:39
我的目標是能夠通過 javascript 將范圍輸入動態(tài)添加到網(wǎng)頁上。我正在為滑塊使用以下代碼<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") 和模板來實現(xiàn)這一點。我能夠繪制滑塊，但是我無法獲得要打印的值并顯示有關如何實現(xiàn)此目標的任何幫助將不勝感激。這是我最近的嘗試腳本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>
查看完整描述

3 回答

?
慕的地8271018

TA貢獻1796條經(jīng)驗 獲得超4個贊

您可以執(zhí)行以下操作：


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>

當心！您必須將創(chuàng)建的元素添加到容器中，否則那里沒有元素。有關更高級的onload方法，請參閱此主題


我希望它有幫助:)


編輯：


我認為您必須在 for 循環(huán)之外附加事件并指定哪個元素必須具有什么功能。我用下面的代碼片段來做到這一點：


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>


查看完整回答
反對 回復 2021-12-02
?
慕姐4208626

TA貢獻1852條經(jīng)驗 獲得超7個贊

在添加事件偵聽器之前等待窗口加載


 window.onload = function() {

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

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

   output.innerHTML = slider.value;


   slider.oninput = function() {

     output.innerHTML = this.value;

   }

 }


查看完整回答
反對 回復 2021-12-02
?
慕尼黑的夜晚無繁華

TA貢獻1864條經(jīng)驗 獲得超6個贊

根據(jù)您的編輯，這是您的答案：


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;

    }

  });


}

代碼會找到每個有類的 divslidecontainer并且它會取第一個輸入和第一個 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>

此代碼將查找slidecontainerdiv 并檢查具有slider類的輸入并將輸入值寫入具有slider-value類的元素


查看完整回答
反對 回復 2021-12-02
  • 3 回答
  • 0 關注
  • 257 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號