jQueryとJavaScriptを使って、ボタンをクリックした時に、指定したidのテキストの内容を入れ替える方法をご紹介。
以下のようなお悩みを抱えている方の助けになれると思います!
- 初期状態では日本語テキストを表示させておいて、ボタンをクリックしたら英語など外国語に翻訳したテキストと差し替える機能を実装する方法が知りたい
それでは作り方、サンプルコードを見ていきましょう。
クリックでテキストの内容を入れ替えるサンプルコード
デモ
See the Pen クリックでテキスト差し替え by 石森裕也 (@yuyaphotograph) on CodePen.
HTML
HTML
<p id="text">日本語の文章が入ります</p>
<div id="ja" class="Btn">日本語に変換</div>
<div id="en" class="Btn">英語に変換</div>
CSS
ボタンのスタイリングはよしなに。
CSS
.Btn{
border-radius: 4px;
width: 240px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: #0fbfae;
color: #fff;
cursor: pointer;
}
#en{
margin-top: 16px;
}
jQuery・JavaScript
jQuery
$(function(){
$('#ja').on('click', function(){
text = "日本語の文章が入ります";
swapText(text);
});
$('#en').on('click', function(){
text = "texttexttexttext";
swapText(text);
});
});
function swapText(text){
document.getElementById('text').innerHTML = text;
}
次はこの記事!






