HOWTO · JavaScript
JavaScript 更改按鈕文字
本教程展示瞭如何使用 JavaScript 更改按鈕文字，並演示了使用 jQuery 更改按鈕文字。
本頁內容
若要使用 JavaScript 更改按鈕文字，對 <input type="button"> 或 <input type="submit"> 指派 value，對 <button> 則指派 textContent。您可以在頁面初始化時執行這項指派，也可以在滑鼠懸停或點擊事件處理函式中執行。jQuery 提供對應的 .val() 與 .text() 方法。
下方的瀏覽器範例是尚未執行的網頁原始碼，沒有記錄的執行輸出。若要在瀏覽器中試用互動效果，請將每個 HTML 範例分別儲存為獨立檔案。
JavaScript 在載入時更改按鈕文字
請將指令碼放在元素之後，確保 JavaScript 選取元素時它們已經存在。這個頁面會在初始化時，將兩個輸入按鈕的標籤從 Update 改為 Remove，並將兩個按鈕元素的標籤改為 Hide Result：
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change labels on load</title>
</head>
<body>
<input id="loadInput" type="button" value="Update">
<input id="loadSubmit" type="submit" value="Update">
<button id="loadButton" type="button">Show Result</button>
<button id="loadSubmitButton" type="submit">Submit Result</button>
<script>
document.querySelector('#loadInput').value = 'Remove';
document.querySelector('#loadSubmit').value = 'Remove';
document.querySelector('#loadButton').textContent = 'Hide Result';
document.querySelector('#loadSubmitButton').textContent = 'Hide Result';
</script>
</body>
</html>
<input> 是空元素，沒有子內容；它顯示的按鈕標籤來自 value。雖然它繼承了與文字相關的 DOM 屬性，但設定這些屬性不會改變顯示的標籤。<button> 顯示的是子內容；它的 value 用途不同，例如用來提供表單資料。
若只要設定按鈕標籤，textContent 會插入純文字。innerText 處理的是呈現後的文字，會受樣式影響；讀取它也可能需要進行版面配置計算。innerHTML 會解析 HTML 標記，因此插入不受信任的字串可能帶來注入漏洞。這兩種文字屬性都不會將指派的字串解析為 HTML，但這不代表它們在所有情況下都絕對安全或速度最快。您可以參閱現有的這些屬性比較以了解更多背景。
將按鈕的整個 textContent 換掉，也會移除它的子元素。如果按鈕內含圖示，請將標籤放在獨立的 <span> 中，並只更新該元素。
如果要將指令碼移到文件的 head 區段，請使用帶有 defer 的外部指令碼，或等待 DOMContentLoaded 事件。querySelector() 會傳回第一個符合項目；若沒有符合的元素，則會傳回 null。若指派沒有生效，請檢查選取器和指令碼執行時機。
JavaScript 在滑鼠懸停時更改按鈕文字
使用 mouseover 在指標移入時更改標籤，再使用 mouseout 還原標籤。背景顏色從紅色變成綠色的效果則由 CSS 處理：
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change a label on hover</title>
<style>
#hoverButton { background-color: red; }
#hoverButton:hover { background-color: green; }
</style>
</head>
<body>
<button id="hoverButton" type="button">Hide Result</button>
<script>
const hoverButton = document.querySelector('#hoverButton');
hoverButton.addEventListener('mouseover', function () {
this.textContent = 'Show Result!';
});
hoverButton.addEventListener('mouseout', function () {
this.textContent = 'Hide Result';
});
</script>
</body>
</html>
addEventListener() 會註冊回呼函式，本身不會觸發事件。在這些一般函式回呼中，this 指向註冊監聽器的按鈕。初始標籤是 Hide Result；懸停時的標籤是 Show Result!。
指標在元素與其子元素之間移動時，也可能觸發這些事件。若按鈕包含巢狀內容，可以考慮使用 mouseenter 和 mouseleave。懸停操作需要指標裝置，因此重要指示也應在不懸停時保持可見。
JavaScript 在點擊時更改按鈕文字
這個輸入按鈕的初始標籤是 Hide Result。其點擊事件處理函式會依唯一 ID 選取元素，並在 Show Result 和 Hide Result 之間交替設定 value：
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toggle a button label</title>
</head>
<body>
<input id="clickInput" type="button" value="Hide Result">
<script>
function nextButtonText(currentText) {
return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
}
function changeText() {
const element = document.getElementById('clickInput');
element.value = nextButtonText(element.value);
}
document.getElementById('clickInput').addEventListener('click', changeText);
</script>
</body>
</html>
getElementById() 接收不含 CSS # 前綴的 ID 字串。事件處理函式使用嚴格相等比較來決定下一個標籤。若是 <button>，請改為讀取並設定 textContent。單獨更改標籤不會顯示或隱藏任何結果內容；若有這項需求，請另外加入相應行為。
接下來的獨立 JavaScript 範例會將相同的標籤選擇函式抽出，供 Node.js 使用。記錄的執行結果產生了下方所示的輸出；輸出中的 Show Result 和 Hide Result 標籤維持英文，因為程式碼與輸出區塊必須原樣保留：
function nextButtonText(currentText) {
return currentText === 'Hide Result' ? 'Show Result' : 'Hide Result';
}
let label = 'Hide Result';
label = nextButtonText(label);
console.log(label);
label = nextButtonText(label);
console.log(label);
Show Result
Hide Result
這次執行只測試獨立的標籤選擇函式。瀏覽器 DOM 事件與 jQuery 互動範例尚未執行。
使用 jQuery 更改按鈕文字
對 <button> 使用 .text()，對輸入按鈕使用 .val()。這個尚未執行的瀏覽器範例需要先載入 jQuery，才能註冊事件處理函式。範例保留原文章中的 jQuery 1.7.1 CDN URL 作為示範依賴；此處尚未確認該 URL 和版本是否可用，或是否適合您的專案。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change labels with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<button id="jqueryButton" type="button">Hide Result</button>
<input id="jqueryInput" type="button" value="Show">
<script>
$('#jqueryButton').on('click', function () {
$(this).text('Show Result').css('background-color', 'green');
});
$('#jqueryInput').on('click', function () {
$(this).val('Hide').css('background-color', 'yellow');
});
</script>
</body>
</html>
點擊按鈕會將文字設為 Show Result，並將背景設為綠色。點擊輸入按鈕會將標籤設為 Hide，並將背景設為黃色。這些事件處理函式設定的是固定標籤，不會切換標籤。.css() 只會改變外觀，不會更改標籤。
.html() 也能替換按鈕內容，但會解析標記；若只需要文字標籤，請使用 .text()。.val() 能直接表達設定輸入按鈕標籤的用途，不必重複呼叫 .attr() 和 .prop()，也不必使用依版本而異的替代寫法。您可以參閱現有的 jQuery HTML 與 CSS 方法參考以了解更多背景。
