JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTMLの使い方やサンプルのブログ

【jQuery】jQuery でボタンが押されると文字が変更されるスクリプトを作ってみよう

f:id:vw-dsg:20200601063533p:plain

ボタンが押されると文字列が変更されるスクリプト

今回は jQuery を使って、ボタンをクリックすると文字列が変更されるスクリプトを作ってみます。

サンプル結果

サンプル結果にあるボタンをクリックすると「アメリカの大統領は誰?」という文字列が変更されます。

サンプル結果
BUTTON
アメリカの大統領は誰?

jQuery + JavaScript

jQuery で「botan2」という id をもった要素がクリックされると、「moji2」という id をもった要素の中身(<div id="moji">変更される部分</div>)が「トランプさん」というテキストに置き換わる処理になっています。

なお、このスクリプトでは文字列を「text」として出力しているので、HTMLのタグはタグとして認識されずそのままの形で出力されます。

「click」イベントはあらかじめ認識させる必要があるため、$(function){ }); の中に入れてページが読み込まれると同時に一度読ませています。これを忘れると「あれ?ボタンをクリックしても何も起こらないぞ・・・」となるので注意してください。

$(function(){
 $("#botan2").click(function(){
  $("#moji2").text("トランプさん");
 });
}); 

CSS

「#botan2」はボタンのスタイルを設定しています。「#botan2:hover」ではマウスポインターがボタンの上に乗った時にマウスポインターを「手の形」になるようにしている部分です。

<style type="text/css">
<!--
#botan2 {
 font-size: 12px;
 color: #000;
 background-color: #CCC;
 text-align: center;
 width: 100px;
 padding: 3px;
 margin-bottom: 10px;
}
#botan2:hover {
 cursor: pointer;
}
-->
</style> 

HTML

必要な要素は、ボタンの <div> タグと文字を表示する <div> タグの2つです。とくに難しいものではありません。 

<div id="botan2">BUTTON</div>
<div id="moji2">アメリカの大統領は?</div>

END