0

I have tried to save 2 slider value in a CSV file with HTML and javascript which I refer to https://stackoverflow.com/questions/66011076/how-to-save-values-chosen-on-slider-to-csv-using-javascript/76866153?noredirect=1#comment135508549_76866153 

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>

Unfortunately, the value saved is undefined.

How to solve the bug? Thank you!

Shang
  • 1
  • The variables `vq1` and `vq2` aren't initialized. Are you getting undefined even after moving the sliders, or only when clicking the button without moving the sliders? – Oskar Grosser Aug 09 '23 at 12:48
  • I get undefined even after moving the sliders. – Shang Aug 10 '23 at 07:26
  • Do you get any errors when moving the sliders? Perhaps you are [trying to find an element before it exists](https://stackoverflow.com/q/14028959/13561410)? Because our code works as a Stack snippet (which runs the JS _at the end_, after all HTML code). – Oskar Grosser Aug 10 '23 at 15:51

0 Answers0