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

Question

The final div of my code contains 5 sliders (I show here just 2) and a “finish” button. On click, I want to be able to:

1. Download a CSV file with the chosen values
2. Display the next div (without displaying the values)

I can only use JS and 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

you need to put variable vq1, vq2 inside callback of input event or call directly slider1.value inside Phase_E_action() function

and for download it need to append to the current page

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>

note: you can't use download function here because the iframe is sanboxed and allow-downloads flag is not set