JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

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

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 

ボタンのタグと、文字を表示するタグの2つが必要となるが、とくに難しいものはない。 

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

 

END