如何在滑塊下顯示值？-有解無憂

我正在從事資訊可視化專案，目前正在嘗試向滑塊添加值。但是，到目前為止它沒有起作用。滑塊本身作業正常，但網頁中的滑塊下方似乎沒有任何價值。我想在滑塊下有諸如 2021-12-15 之類的日期，如何使它起作用？這是我到目前為止作業的代碼，提前致謝！

<div class="slidecontainer">
    <input type="range" min="1" max="12" value="12" class="slider" id="mySlider">
</div>

<script>
    var slider = document.getElementById("mySlider");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)
    slider.oninput = function() {
        output.innerHTML = this.value;
    }
</script>

function slider_Update(binNumber) {
    new_date = formatTime(new Date("2008-" binNumber "-01"));
      let checked_group = ".";
      let count = 1;
      // For each checkbox:
    d3.selectAll(".checkbox").each(function(d){
        const cb = d3.select(this);
        const grp = cb.property("value");
        //console.log(cb.property("checked") " " cb.property("value"));
      // If the box is check, add to checked_group, else hide
      if(cb.property("checked")){
        if(count===1){
          checked_group  = grp;
          count  ;
          //console.log(checked_group "  count: " count);
        }else{
          checked_group  = ",." grp;
          //count  ;
          //console.log(checked_group "  count: " count);
        }
      }
    })
    //change opacity for created group
    update_Worldmap(checked_group);
    update_BarPlot();
  }

  //Slider source
  //https://www.d3-graph-gallery.com/graph/density_slider.html
  // Listen to the slider
  d3.select("#mySlider").on("change", function(d){
    selectedValue = this.value
      slider_Update(selectedValue)
    //console.log("from mySldier select: " selectedValue)
  })

uj5u.com熱心網友回復：

您demo的 HTML 中沒有帶有 id 的元素。你應該做這樣的事情：

var slider = document.getElementById("mySlider");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
};

<div class="slidecontainer">
  <input type="range" min="1" max="12" value="12" class="slider" id="mySlider" />
  <div id="demo"></div>
</div>

uj5u.com熱心網友回復：

我們如何創建新元素并將 new_date 輸出到該元素

<div class="slidecontainer">
    <input type="range" min="1" max="12" value="12" class="slider" id="mySlider">
    <div id="slideDate"></div>
</div>

<script>
    var slider = document.getElementById("mySlider");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)
    slider.oninput = function() {
        output.innerHTML = this.value;
    }


function slider_Update(binNumber) {
    var new_date = formatTime(new Date("2008-" binNumber "-01"));
      let checked_group = ".";
      let count = 1;
      // For each checkbox:
    d3.selectAll(".checkbox").each(function(d){
        const cb = d3.select(this);
        const grp = cb.property("value");
        //console.log(cb.property("checked") " " cb.property("value"));
      // If the box is check, add to checked_group, else hide
      if(cb.property("checked")){
        if(count===1){
          checked_group  = grp;
          count  ;
          //console.log(checked_group "  count: " count);
        }else{
          checked_group  = ",." grp;
          //count  ;
          //console.log(checked_group "  count: " count);
        }
      }
    })
    //change opacity for created group
    update_Worldmap(checked_group);
    update_BarPlot();
    $("#mySlider").html(new_date)
  }

  //Slider source
  //https://www.d3-graph-gallery.com/graph/density_slider.html
  // Listen to the slider
  d3.select("#mySlider").on("change", function(d){
    selectedValue = this.value
    slider_Update(selectedValue)
    //console.log("from mySldier select: " selectedValue)
  })
</script>

uj5u.com熱心網友回復：

如果你只需要輸出滑塊的值，你可以像這樣添加一個 div：

var slider = document.getElementById("mySlider");
var output = document.getElementById("slidertext");
output.innerHTML = slider.value; // Display the default slider value

console.log(output);

    // Update the current slider value (each time you drag the slider handle)
    slider.oninput = function() {
        output.innerHTML = this.value;
    }

function slider_Update(binNumber) {
    new_date = formatTime(new Date("2008-" binNumber "-01"));
      let checked_group = ".";
      let count = 1;
      // For each checkbox:
    d3.selectAll(".checkbox").each(function(d){
        const cb = d3.select(this);
        const grp = cb.property("value");
        //console.log(cb.property("checked") " " cb.property("value"));
      // If the box is check, add to checked_group, else hide
      if(cb.property("checked")){
        if(count===1){
          checked_group  = grp;
          count  ;
          //console.log(checked_group "  count: " count);
        }else{
          checked_group  = ",." grp;
          //count  ;
          //console.log(checked_group "  count: " count);
        }
      }
    })
    //change opacity for created group
    update_Worldmap(checked_group);
    update_BarPlot();
  }

  //Slider source
  //https://www.d3-graph-gallery.com/graph/density_slider.html
  // Listen to the slider
  d3.select("#mySlider").on("change", function(d){
    selectedValue = this.value
      slider_Update(selectedValue)
    //console.log("from mySldier select: " selectedValue)
  })

<div class="slidecontainer">
    <input type="range" min="1" max="12" value="12" class="slider" id="mySlider">
</div>
<div id = "slidertext"></div>

對于日期部分，您能否提供有關滑塊需要做什么的更多資訊？它必須更改整個日期？只有幾個月？謝謝

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381643.html

標籤：javascript html css 滑块信息可视化

上一篇：嘗試在phpfatfreeframework和mysql中插入帶有外鍵的記錄時出現問題

下一篇：僅將樣式應用于內容可編輯<p>中的選定文本