如何使用 JavaScript 将滑块上选择的值保存到 csv？

Question

我的代码的最后 div 包含 5 个滑块（我在这里只显示 2 个）和一个“完成”按钮。单击时，我希望能够：

下载包含所选值的 CSV 文件
显示下一个div（不显示数值）

我只会用JS和HTML。

/// phase C ////

var slider1 = document.getElementById("q1");
var demo1 = document.getElementById("demo1");
var vq1 = slider1.value;
demo1.innerHTML = slider1.value;

slider1.oninput = function() {
  demo1.innerHTML = this.value;
}
var slider2 = document.getElementById("q2");
var demo2 = document.getElementById("demo2");
var vq2 = slider2.value;
demo2.innerHTML = slider2.value;

slider2.oninput = function() {
  demo2.innerHTML = this.value;
}

function Phase_E_action() {
  document.getElementById("Phase_D").hidden = true;
  document.getElementById("Phase_E").hidden = false;
  var fileContent = vq1 + "," + vq2;
  var bb = new Blob([fileContent], {
    type: 'text/plain'
  });
  var a = document.createElement('a');
  a.downoload = "Exp" + Date().toString().slice(4, 24) + ".csv";
  a.href = window.URL.createObjectURL(bb);
  a.click();
}

<div id="Phase_D">

  <span class="v50_15"><h1>Please state your opinion on Bob</h1></span>

  <div class="slidecontainer">
    <span class="v50_16"><p>On a scale from 0 to 100, when 0 means mean and ten means nice, how would you rate Bob?</p>
        <input type="range" min="1" max="100" value="50" class="slider" id="q1">
        <p>Value: <span id="demo1"></span></p>
    </span>
  </div>

  <div class="slidecontainer">
    <span class="v50_17"><p>On a scale from 0 to 100, when 0 means bad and ten means good, how would you rate Bob?</p>
        <input type="range" min="1" max="100" value="50" class="slider" id="q2">
        <p>Value: <span id="demo2"></span></p>
    </span>
  </div>
</div>

Answer 1

您需要将变量 vq1, vq2 放入 input 事件的回调中，或者直接在 Phase_E_action() 函数

中调用 slider1.value

下载需要附加到当前页面

var vq1, vq2;

var slider1 = document.getElementById("q1");
var demo1 = document.getElementById("demo1");
demo1.innerHTML = slider1.value;

slider1.oninput = function() {
  // put the variable here
  vq1 = demo1.innerHTML = this.value;
}

var slider2 = document.getElementById("q2");
var demo2 = document.getElementById("demo2");
demo2.innerHTML = slider2.value;

slider2.oninput = function() {
  vq2 = demo2.innerHTML = this.value;
}

function Phase_E_action() {
  var fileContent = vq1  + "," + vq2;
  console.log(fileContent)

  var bb = new Blob([fileContent], {
    type: 'text/plain'
  });
  var a = document.createElement('a');
  a.download = "Exp" + Date().toString().slice(4, 24) + ".csv";
  a.href = window.URL.createObjectURL(bb);
  a.innerHTML = 'fff'

  document.body.appendChild(a)
  a.click();
  document.body.removeChild(a);
}

<div id="Phase_D">
  <span class="v50_15">
    <h1>Please state your opinion on Bob</h1>
  </span>

  <div class="slidecontainer">
    <span class="v50_16">
      <p>On a scale from 0 to 100, when 0 means mean and ten means nice, how would you rate Bob?</p>
      <input type="range" min="1" max="100" value="50" class="slider" id="q1">
      <p>Value: <span id="demo1"></span></p>
    </span>
  </div>

  <div class="slidecontainer">
    <span class="v50_17">
      <p>On a scale from 0 to 100, when 0 means bad and ten means good, how would you rate Bob?</p>
      <input type="range" min="1" max="100" value="50" class="slider" id="q2">
      <p>Value: <span id="demo2"></span></p>
    </span>
  </div>
<button onclick="Phase_E_action()">
Download CSV
</button>

注意：您不能在此处使用下载功能，因为 iframe 是沙箱且未设置 allow-downloads 标志

如何使用 JavaScript 将滑块上选择的值保存到 csv？

How to save values chosen on slider to csv using JavaScript?

html

javascript

slider