Konvertieren "Same" Mehrere <Button> Funktionen zu Generic-Funktion mit <Select>

Question

Ich habe mehrere Tasten, die alle etwas sehr ähnliches tun. Wie benutze ich eine <select> Box mit einer <button>, um dasselbe mit weniger Javascript zu machen?

Dies sind die Tasten I mit nur einer Taste in eine <select> Box machen wollen:

<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> 

Hier mein Javascript jetzt ist:

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

Hier ein Ausschnitt ist, Ich denke nicht, dass es viel Erklärung benötigt.

Ich habe ein Array von Dateitypen erstellt und jquery verwendet, um die <select> mit <option> s zu füllen. Dann suche ich gerade nach oben, die man gewählt, wenn Sie auf die Schaltfläche save Taste ...

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>