如何動態更改HTML中<a>'download'字段的值？

Question

我有以下幾點：

 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> 

我需要下載的文件名由「文件名」字段設置。這樣做的最簡單方法是什麼？

Answer 1

嘗試，如果你不使用jQuery您只需使用普通的JavaScript使用.attr()和.val()在各元素來完成你的任務，

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

Answer 2

。這裏是代碼。

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>