轉換「相同」多個<Button>功能與通用功能<Select>

我有多個按鈕，都做了非常相似的事情。如何使用<select>框與一個<button>用較少的JavaScript做同樣的事情？轉換「相同」多個<Button>功能與通用功能<Select>

這些是我想要變成一個<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"; 
}

來源

2017-03-08 SeekLoad

謝謝你縮短了我的答案。我想我的英語在討論代碼時不太好。謝謝... @jcuenod – SeekLoad

這裏有一個片段，我認爲這不需要太多解釋。

我已經創建了一個文件類型數組，並使用jquery將填入<option> s。然後，我只是仰望選擇哪一個當您單擊save按鈕...

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>

來源

2017-03-08 18:59:23 jcuenod

謝謝你。它工作完美。現在我想知道有沒有辦法做到這一點，而不使用「jquery」？如果沒有，那麼我會簡單地使用jquery，但我寧願要它獨立於jquery，如果可能的話。可悲的是，我不能給你一個像，因爲我需要超過15的名譽，現在我只有11。這是因爲我剛開始使用這個頁面。我之前有過這個賬戶很長一段時間，但我從來沒有使用過它。 – SeekLoad

@SeekLoad你應該能夠接受11的代表答案。沒有jquery很容易做到這一點 - 我只使用jquery填充''元素，但是你想要的。我使用jquery，因爲你用jquery標記了你的問題。 – jcuenod

@SeekLoad也，我已經編輯了你的問題，以向你展示如何在未來提出更好的問題。儘量減少你的代碼至關重要，這使得回答這個問題變得更容易。如果可能的話，讓它成爲其他人可以從中受益的問題。 – jcuenod

轉換「相同」多個<Button>功能與通用功能<Select>

回答

相關問題