JavaScriptでボタンを作る方法 onclick

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

JavaScriptで遊んでいます。

今回のテーマは「ボタン」です。

「ボタン」をポチッと押すと、何かが起こる…

っていうことがJavaScriptでできれば、いろいろ楽しそうですよね。

というわけで、

今回は「ボタン」を使って、何かカンタンなことをやってみようと思います。

スポンサーリンク

onclick

ボタンはonclickを使って実現します。

さて。

ボタンを使って何をするかですが…

一番カンタンなのは、アラートの表示でしょうか。

おみくじ

たとえば、よくある例だと思いますが…

「おみくじ」というボタンをクリックすると、アラートで「大吉」と表示されるようにしてみます。

ボタンの作り方 その1

ボタンはこんなふうに作ります。

じゃーん。

<html>
<head>
</head>
<body>

<button onclick="alert('大吉');">おみくじ</button>

</body>
</html>

※携帯電話端末で見ると、文字が画面からはみ出しているかも知れません。指をあててスライドすると、端まで見えると思います。

実行するとどうなる?

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

画面に「おみくじ」というボタンが表示されます。

そのボタンをクリックすると、アラートで「大吉」と表示されます。

ボタンの作り方 その2

あと…

こういうやり方もあります。

<html>
<head>
</head>
<body>

<input type="button" value="おみくじ" onClick="alert('大吉');">

</body>
</html>

※こちらも、携帯電話端末で見て文字が画面からはみ出しているときは、指をあててスライドしてみてください。端まで見えると思います。

実行するとどうなる?

さっきと同じです。

画面に「おみくじ」というボタンが表示されて、それをクリックすると、アラートで「大吉」と表示されます。

宝箱

おみくじ。

うまくいきましたね。

今度は、ボタンを使って宝箱を作ってみます。

宝箱の中身

突然ですが…

あなたはファンタジーの世界の「勇者」です。

目の前に2つの宝箱があります。

どちらかには金貨が、どちらかにはモンスターが入っています。

あなたはどちらを開けますか?

金貨をゲットするか モンスターが飛び出すか

これをボタンでやってみたいと思います。

ふたつの「宝箱」ボタンをつくります。

どちらかのボタンをクリックするとアラートで「金貨」と表示され、べつの方をクリックすると「モンスター」と表示される、というものです。

2つのボタンを表示

それがこちらです。

<html>
<head>
</head>
<body>

<button onclick="alert('金貨');">宝箱</button>
<input type="button" value="宝箱" onClick="alert('モンスター');">

</body>
</html>

※携帯電話端末で見ると、文字が画面からはみ出しているかも知れません。指をあててスライドすると、端まで見えると思います。

せっかくなので、ボタンの表示のしかた2種類を、それぞれ使ってみました。

もちろん、ボタンの表示のしかたは、どちらかに統一してもOKです。

実行するとどうなる?

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

「宝箱」ボタンが2つ表示されます。

左のボタンをクリックすると、アラートで「金貨」と表示されます。

金貨ゲットです!

右のボタンをクリックすると、アラートで「モンスター」と表示されます。

モンスターが飛び出してきました!

以上が、onclickでボタンを作る方法です。

今回はこれでおしまい。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。