JSFiddle - React, Tailwind, and code Playground
HTML
<tr> <td>appKey</td>
<td><input type="text" id="_appKey" size="40"></td>
<a download="info.txt" class="downloadlink" >Download</a> </p>
</tr>
<tr>
<td>bundleId</td>
<td><input type="text" id="_bundleId" size="40"></td>
<a download="info.txt" class="downloadlink" >Download</a> </p>
</tr>
<tr>
<td>serverURL</td>
<td><input type="text" id="_serverURL" size="40"></td>
<a download="info.txt" class="downloadlink" >Download</a> </p>
</tr>
JavaScript
(function () {
var textFile = null,
makeTextFile = function (text) {
var data = new Blob([text], {type: 'text/plain'});
// If we are replacing a previously generated file we need to
// manually revoke the object URL to avoid memory leaks.
if (textFile !== null) {
window.URL.revokeObjectURL(textFile);
}
textFile = window.URL.createObjectURL(data);
return textFile;
};
var inputFields = document.getElementsByTagName('input');
for(var i = 0; i < inputFields.length; i++) {
(function(i){
inputFields[i].addEventListener('keyup', function () {
console.log(inputFields[i].value)
var link = document.getElementsByClassName('downloadlink')[i];
link.href = makeTextFile(inputFields[i].value);
});
})(i);
}
})();