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

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