I am attempting to implement a dropdown menu that displays all the files currently in a directory. The goal is for the user to be able to click on a file in the list and have the name of that file printed to the console.
Here is my current progress:
HTML
<form method="post">
<select name="DropdownList">
<option value="file1">fileArray[0]</option>
<option value="file2">fileArray[1]</option>
<option value="file3">fileArray[2]</option>
<option value="file4">fileArray[3]</option>
</select>
</form>
The issue with this hardcoded approach is that it may not adapt well if there are more than 4 files. I am looking for a more dynamic solution.
Javascript
document.getElementByName('DropdownList').addEventListener('click', function() {
window.update.forEach(function(d, 'data/baselinedata') {
var f = readStringFromFileAtPath(d);
console.log(f)
});
});
function readStringFromFileAtPath (pathOfFileToReadFrom) {
var request = new XMLHttpRequest();
request.open("GET", pathOfFileToReadFrom, false);
request.send(null);
var returnValue = request.responseText;
return returnValue;
}
I am struggling to figure out how to dynamically generate the list of file names in the dropdown without hardcoding them. As a beginner in web programming, I find this challenging.
Edit:
To clarify, my objective is simply to populate a dropdown list with the names of files in a directory. When a user clicks on an item in the list, the contents of that file should be printed or logged using console.log().