I am trying to make a basic website that runs a JS script when a button is pressed (accepting input from a textbox). This website is currently hosted on Github Pages. When activited, the script should:

• Load JSON from a file
• Modify one value from the JSON to be the user input
• Rewrite the JSON file to include this change
• Automatically download the modifies JSON file for the user

Once I get that done, I want to eventually have the file included in another directory, and that directory zipped up and downloaded instead of just the modified JSON file.

Here is my code so far:

document.getElementById("submit").onclick = function(){

    var userInput = document.getElementById("userInput").value;

    fetch("path/to/file/myfile.json")
    .then(response => response.json() )
    .then(result => {
        result["foo"]["bar"] = userInput;
        var data = JSON.stringify(result);

        data = "text/json;charset=utf-8," + encodeURIComponent(data);
        var a = document.createElement('a');
        a.href = 'data:' + data;
        a.download = 'data.json';
        a.innerHTML = 'download JSON';
        document.getElementById('container').appendChild(a);
    });
};

Currently, I get a 405 Not Allowed error when I click the button. Looking at the Console, all the information I get is "POST 405". Earlier, when I was still messing around with a bunch of things, I would get errors saying something along the lines of "userInput cannot be set to undefined (result["foo"]["bar"])."

A couple things:

• Yes, the file exists. The console shows confirmation that the fetch request was successful.
• The ["foo"]["bar"] key path exists in the JSON object.

Any ideas on the issue? I appreciate your help in advanced!