ボタンを押すと名前を追加

ここにテキトーな名前を入れてください:
ボタンを押すと下に名前が追加されます

こんにちは！

今回もJavaScriptです。まず、上のソースです。

前回は非表示にしていた画像を表示しただけですが、今回はどんな名前が入力されるかわからないので非表示にして隠しておくことが出来ません。

そんな時の方法です。

入力フォーム

ＨＴＭＬで入力する欄のことをフォームと言います。

文字を入力するフォームは次のように書きます。

上のフォームは正しくないので、今回詳しくは説明しません。
JavaScriptを説明するためにフォームの機能だけ使いますが、正しい書き方は別になります。
（本来はid属性でなくname属性が必要）それについては、別の機会に扱いたいと思います。

とりあえず、<input type=”text”　value=””/>と書くと、上のように文章が入力できるようになります。入力された文章はvalue=””の中に格納されます。

今回はnameのvalueに格納された名前をid=”text”のpタグに追加します。
そこで２つのidを使っています。

今回のスクリプトの内容

var e1=document.getElementById(‘name’);
idがnameのタグを探してe1に入れてください。

var e2=document.getElementById(‘text’);
idがtextのタグを探してe2に入れてください。

e2.innerHTML+=e1.value+’さん’;
e2（つまりidがtextのタグ）のinnerHTMLにe1（つまりidがnameのタグ）のvalueの中身プラス’さん’という文字を追加してください。

という内容です。

innerHTML

innerHTMLというのはタグとタグに囲まれた中の部分です。

文章を追加する

+=が追加という意味の記号です。
だから上のボタンを続けて押すと、続けて名前が書き込まれます。

これをプラス記号のないe2.innerHTML=e1.value+’さん’にすると、元からあった「こんにちは！」を消して、e1.value+’さん’だけを書き込みます。