"同義"を複数に変換<Button>汎用関数への関数<Select>

Question

私は非常に似たような操作を行う複数のボタンがあります。 <select>と1つの<button>のボックスを使用して、JavaScriptを少なくして同じことを行うにはどうすればよいですか？

これらは、私はちょうどボタン一つで<select>ボックスに変身するボタンです：ここでは

<button onclick="SaveAsHTML()">Save As HTML</button> 
<button onclick="SaveAsJS()">Save As JS</button> 
<button onclick="SaveAsCSS()">Save As CSS</button> 
<button onclick="SaveAsTXT()">Save As TXT</button> 

は、今の私のjavascriptです：

function SaveAsHTML() 
{ 
    var filename = document.getElementById("txtFilename").value; 
    var filename = filename + ".html"; 
} 

function SaveAsCSS() 
{ 
    var filename = document.getElementById("txtFilename").value; 
    var filename = filename + ".css"; 
} 

function SaveAsJS() 
{ 
    var filename = document.getElementById("txtFilename").value; 
    var filename = filename + ".JS"; 
} 

function SaveAsTXT() 
{ 
    var filename = document.getElementById("txtFilename").value; 
    var filename = filename + ".txt"; 
} 

Answer 1

ここでスニペットですが、私はそれが多くの説明を必要とは思わない。

ファイルタイプの配列を作成し、<select>に<option>を入力するためにjqueryを使用しました。その後、私はちょうど...あなたはsaveボタンをクリックしたときに選択される1

var types = [ 
 
    {"extension": "html", "name": "HTML"}, 
 
    {"extension": "txt", "name": "Plain Text"}, 
 
    {"extension": "js", "name": "Javascript"}, 
 
    {"extension": "css", "name": "CSS"}, 
 
] 
 
types.forEach(function(type) { 
 
    $opt = $("<option>").attr("value", type.extension).text(type.name) 
 
    $("#saveas").append($opt) 
 
}) 
 

 
function SaveAsType() 
 
{ 
 
    console.log($("#saveas").val()) 
 
    /** 
 
    * Put your code here and replace: 
 
    document.getElementById("inputFileNameToSaveAs").value + ".html"; 
 
    * with 
 
    document.getElementById("inputFileNameToSaveAs").value + "." + $("#saveas").val(); 
 
    */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Save as <select id="saveas"> 
 
</select><button onclick="SaveAsType()">save</button>