JavaScript の変更ボタンのテキスト
- JavaScript でロード時にボタンテキストを変更
- マウスオーバー時の JavaScript 変更ボタンテキスト
- クリック時の JavaScript 変更ボタンのテキスト
- jQuery を使用した JavaScript のボタンテキストの変更
サンプルコードを使用して、JavaScript の変更ボタンのテキストについて学習することを目的としています。ロード、クリック、マウスオーバーでボタンのテキストがどのように変化するかを示しています。また、ボタンのテキストを変更するための jQuery の使用例も示しています。
JavaScript でロード時にボタンテキストを変更
input[type='button'] や input[type='submit'] のような HTML <input> 要素がある場合は、次の方法でボタンのテキストを変更できます。
HTML コード：
<input id="btn" type="button" value="Update">
<input id="btnSubmit" type="submit" value="Update">
JavaScript コード：
document.querySelector('#btn').value = 'Remove';
document.querySelector('#btnSubmit').value = 'Remove';
以下のメソッドのいずれかを使用して、HTML<button> 要素のボタンテキストを変更することもできます（指定されたメソッドは、.innerHTML、.innerText、および .textContent です）。
HTML コード：
<button id="btn" type="button" value="Show Result">Show Result</button>
<button id="btnSubmit" type="submit" value="Submit Result">Submit Result</button>
JavaScript コード：
// querySelector selects the element whose id's value is btn
document.querySelector('#btn').innerHTML = 'Hide Result';
document.querySelector('#btn').innerText = 'Hide Result';
document.querySelector('#btn').textContent = 'Hide Result';
// querySelector selects the element whose id's value is btnSubmit
document.querySelector('#btnSubmit').innerHTML = 'Hide Result';
document.querySelector('#btnSubmit').innerText = 'Hide Result';
document.querySelector('#btnSubmit').textContent = 'Hide Result';
HTML の <input> 要素に .innerHTML、.innerText、および .textContent を使用できますか？いいえ。理由は、<input> が空の要素であるのに対し、<button> はコンテナタグであり、.innerHTML、.innerText、および .textContent プロパティを持っているためです。
目標は .innerHTML、.innerText、および .textContent を使用することで達成されますが、特定の点を念頭に置く必要があります。
- JavaScript
.innerHTMLを使用しているため、クロスサイトセキュリティ攻撃に直面する必要がある場合があります。 - JavaScript
.innerTextは、レイアウトシステムに関する詳細が必要なため、パフォーマンスが低下します。 - JavaScript
.textContentは、.innerHTMLのようなセキュリティ上の懸念を引き起こしません。また、.innerTextのような HTML コンテンツを解析する必要がないため、最高のパフォーマンスが得られます。
今、あなたはそれらの間の違いを知っています。したがって、プロジェクトの要件に合ったこれらの方法のいずれかを選択してください。あなたはそれらについてもっと読むことができますここ。
マウスオーバー時の JavaScript 変更ボタンテキスト
HTML コード：
<button class="button">Hide Result</button>
CSS コード：
.button {
background-color: red;
}
.button:hover {
background-color: green;
}
JavaScript コード：
let btn = document.querySelector('.button');
btn.addEventListener('mouseover', function() {
this.textContent = 'Show Result!';
})
btn.addEventListener('mouseout', function() {
this.textContent = 'Hide Result';
})
上記のコードは、マウスポインタがボタンにカーソルを合わせるとボタンのテキストと色が変化する出力を表示するはずです。
querySelector() は、定義されたセレクターに一致する最初の要素を出力します。addEventListener() は、指定された要素にイベントハンドラーをアタッチし、特定のイベントをトリガーするためのメソッドを設定します。
mouseover イベントと mouseout イベントを使用し、.textContent はボタンのテキストを変更します。
クリック時の JavaScript 変更ボタンのテキスト
HTML コード：
<input onclick="changeText()" type="button" value="Hide Result" id="btn">
JavaScript コード：
function changeText() {
let element = document.getElementById('btn');
if (element.value == 'Hide Result')
element.value = 'Show Result';
else
element.value = 'Hide Result';
}
ボタンをクリックすると changeText() が実行されます。このメソッドは、getElementById() を使用して、指定されたセレクターに一致する最初の要素を取得します。次に、要素の値をチェックし、if-else ステートメントに従って変更します。
jQuery を使用した JavaScript のボタンテキストの変更
HTML コード：
<!DOCTYPE>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<button id="button" onclick="changeText()">Hide Result</button>
</body>
</html>
JavaScript コード：
function changeText() {
$('#button').html('Show Result');
$('#button').css('background-color', 'green');
}
上記のコードは、ボタンをクリックすると、ボタンのテキストを結果を非表示から結果を表示に変更し、ボタンの色も緑色に変更します。
.html() は選択した要素のコンテンツを設定し、.css() は background-color を緑に変更します。.html() は HTML<button> 要素に使用されることを忘れないでください。
これらの機能の詳細については、このリンクを確認してください。
HTML <input> 要素がある場合、jQuery を使用してテキストを変更するにはどうすればよいか考えているかもしれません。次のコードはあなたが理解するためのものです。
HTML コード：
<!DOCTYPE>
<html>
<head>
<title>Change Text</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<input type="button" id="btnShow" value="Show" onclick="changeText()">
</body>
</html>
JavaScript コード：
function changeText() {
$('#btnShow').attr('value', 'Hide'); // versions older than 1.6
$('#btnShow').prop('value', 'Hide'); // versions newer than 1.6
$('#btnShow').css('background-color', 'yellow');
}
.attr() または prop()（jQuery のバージョンに応じて）を使用して、HTML <input> 要素のボタンテキストを変更できます。.attr() と .prop() はどちらも、<input> 要素の value 属性を対象とし、2 番目のパラメーターに従ってその値を変更します。
このサンプルコードでは、2 番目のパラメーターは Hide です。changeText() メソッドも、.css() 関数を使用して背景色を黄色に変更します。
