Javascript 如何动态更改<；a>'；下载'；HTML中的字段？

我有以下资料：

        AUTHOR<input type="text" name="author" id="authortxt"><br>
        FILENAME<input type="text" name="filename" id="filenametxt"><br>
        EMAIL<input type="text" name="email" id="email">
        <img id="saveicon" src="interface/SaveIcon0.png" onmouseover="this.src='./interface/SaveIcon1.png'" onmouseout="this.src='./interface/SaveIcon0.png'" />
        <img id="cancelicon" src="interface/CancelIcon0.png" onmouseover="this.src='./interface/CancelIcon1.png'" onmouseout="this.src='./interface/CancelIcon0.png'" />
        <a id="download" download="TestJSON-r.json">Download</a>

作者

文件名

电子邮件
下载

我需要下载的文件名由“文件名”字段设置。做这件事最简单的方法是什么？

尝试使用和覆盖各个元素来完成任务

$("#download").attr("download", $("#filenametext").val())

---

如果不使用jquery，只需使用普通Javascript即可。这是代码

    AUTHOR<input type="text" name="author" id="authortxt"><br>
   AUTHOR<input type="text" name="author" id="authortxt"><br>
    FILENAME<input type="text" name="filename" id="filenametxt"  onchange="change_download_text(this)"><br>
    EMAIL<input type="text" name="email" id="email">
    <img id="saveicon" src="interface/SaveIcon0.png" onmouseover="this.src='./interface/SaveIcon1.png'" onmouseout="this.src='./interface/SaveIcon0.png'" />
    <img id="cancelicon" src="interface/CancelIcon0.png" onmouseover="this.src='./interface/CancelIcon1.png'" onmouseout="this.src='./interface/CancelIcon0.png'" />
    <a id="download" download="TestJSON-r.json">Download</a>

     <script>
        function change_download_text(calledvalue){
        var download =  document.getElementById("download") ; 
        download.innerHTML = calledvalue.value ;
      }
    </script>

作者

作者

文件名

电子邮件
下载
函数更改\下载\文本（调用值）{
var download=document.getElementById（“下载”）；
download.innerHTML=calledvalue.value；
}