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で要素を選択し、value を Show Result と Hide Result の間で切り替えます。コード内の表示ラベルは英語のままです。
<!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向けに切り出しています。記録された実行では、下に示す出力が得られました。
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メソッドのリファレンスを参照してください。
