スポンサーリンク
JavaScriptを使うと、HTMLに動きを加えることができます。
今回は簡単な処理として、文字の色を変えるようなプログラムを作ってみようと思います。
目標
最終目標をしてはこんな感じにします。
ボタンを設置し押すと文字の色が変わります。
下のボタンを押してみてください！
文字色を変える！
作っていく！
HTML
1 2 | <p id="text">文字色を変える！</p> <input type="button" value="ボタン" onclick="changeColor('text');"> |
１行目でtextというidを付けて文字を設定しています。
２行目でボタンを設置し,クリック時の処理を設定しています。
JavaScript
1 2 3 4 5 | <script> function changeColor(event){ //文字を青色に変更する document.getElementById(event).style.color = 'BLUE';} </script> |
ボタンが押されたときの処理をJavaScriptで書きました。
document.getElementById(event)という部分で、eventに一致する要素を抜き出しています。
その要素にstyle.colorを引っ付けて色を変更しています。
まとめ
というわけでこんな感じとなります。うまく動いたでしょうか？？
Webページが動くと面白いですよね！終わり！
スポンサーリンク
