テキストをグラブしてリンクに追加する

Question

入力領域からテキストを取得し、 "href"リンクの最後と "download = ''"領域の最後に挿入する方法はありますか？提案のため

<input id="username" type="text" value="Monster"> 

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a> 

ありがとう：ユーザーがテキストを入力するとき

<input id="username" type="text" value=""> 

<a class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/(textarea text here)" download="(textarea text here).png">Download Image</a> 

結果：

コード：私は、以下の例を追加しました。

Answer 1

私は可能な解決策でフィドルを作成しました。変数の宣言を取り除きたい場合は最小限に抑えることができますが、私は自分のコードがきれいです。あなたはそれ設定可能（また、変更のURLやファイルの拡張子）を行うことができます。このようにhttps://jsfiddle.net/sctvdL0h/1/

Htmlの

<input id="username" type="text" value=""> 

<a class="btn btn-block btn-lg btn-primary" href="" download="(textarea text here).png" id="download_link">Download Image</a> 

JS

var input = document.getElementById("username"); 
var downloadLink = document.getElementById("download_link"); 
var baseLink = 'http://mypage.com/test/'; 
var baseFormat = '.png'; 

var updateLink = function() { 
    var currentValue = input.value; 
    downloadLink.href = baseLink + currentValue.toString(); 
    downloadLink.setAttribute('download', currentValue.toString() + baseFormat); 
}; 
input.addEventListener("keyup", function() { 
    updateLink(); 
}); 
input.addEventListener("change", function() { 
    updateLink(); 
}); 

。これは唯一の解決策ではありません。

Answer 2

アンカータグに「mylink」のIDを追加します。

<a id="mylink" class="btn btn-block btn-lg btn-primary" href="http://mypage.com/test/Monster" download="Monster.png">Download Image</a> 

次に、このコードで設定されます。どのイベントをhrefの設定をトリガーするかを決める必要があります。 onblurは一般的なものです。

document.getElementById("mylink").href=document.getElementById("username").value; 

Answer 3

Javascriptコードを使用できます。私は例を与える。

<script> 
(function ready() { 
    var input = document.getElementById('username'), 
     link = document.getElementById('getLink'); 

    link.onclick = function() { 
    link.download = input.value + ".png"; 
    window.open('http://mypage.com/test/' + input.value,'_blank'); 
    } 
})(); 
</script> 




<input id="username" type="text" value=""> 
<a id="getLink" class="btn btn-block btn-lg btn-primary" href="">Download Image</a>