メソッドを書けるようになったら何かを制御したいと思ったりするのではないでしょうか。
Javascriptで最初に制御するものといえばボタンではないでしょうか。
ということでボタンをクリックしてメソッドを実行させてみましょう。
ボタンとは
Javascriptの前にボタンについて軽く説明します。
Javascriptで制御するボタンはhtmlのbuttonタグで作成します。
htmlタグないに以下のコードを書くとボタンが作成できます。
<button>ボタンです</button>
作成されるボタン。
今はまだhtmlのみなので動きませんが、このボタンをクリックすると「クリック」というイベントが発生します。そのイベントを利用してJavascriptを実行します。
onClickでメソッドを呼びだしてみよう
Javascriptにはイベントハンドラーが用意されておりonClickでボタンのクリックに対して制御をかけます。
<button onClick=”メソッド名”>Click me!</button>
サンプルコード 簡単なコードを作ってみる
ボタンをクリックするとアラートがでます。
See the Pen button onClick check by Nakamoto (@programmerlife) on CodePen.
<!DOCTYPE html>
<html lang=”jp”>
<body>
<button onClick=”btnCtr()“>Click me!</button>
</body>
<script>
function btnCtr(){
alert(“Thank you!”);
}
</script>
</html>
buttonタグにonClickをつけるだけで簡単に制御できることがわかると思います。
ボタンを押して入力欄を非活性
せっかくなのでボタンで入力欄(input)の非活性をしてみたいと思います。
非活性にするにはinputタグにdisable属性を追加します。
See the Pen Button onclick disabled by Nakamoto (@programmerlife) on CodePen.
<!DOCTYPE html>
<html lang=”jp”>
<body>
<input id=”dis” type=”text” />
<button onClick=”btnCtr()“>Click me!</button>
</body>
<script>
function btnCtr(){
document.getElementById(“dis”).disabled = true;
}
</script>
</html>
制御するためにinputにid(id=”btn”)をつけています。
document.getElementByIdでIDを取得しそのIDのタグにdisabledをつけています。
実行するとタグは以下のように変化します。
<input id=”dis” type=”text” disabled />
inputタグにdisabledがつくことで非活性になります。
おわり
onClickでボタンをクリックしてメソッドを実行してみました。
自分の書いたコードを動かすきっかけがあるだけでコードを書くのが楽しくなりますよね。
