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

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

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

1. 下载包含所选值的 CSV 文件
2. 显示下一个 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>

解决方法

你需要把变量vq1,vq2放在input事件的回调里面或者直接在slider1.value函数里面调用Phase_E_action()

下载需要附加到当前页面

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 标志