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

スポンサーリンク


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

こんにちは!


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

ここにテキトーな名前を入れてください: <input type=”text” value=”” id=”name”/>
ボタンを押すと下に名前が追加されます <input type=”button” value=”クリック” onclick=”(function(){var e1=document.getElementById(‘name’);var e2=document.getElementById(‘text’);e2.innerHTML+=e1.value+’さん’;})()”/>
<p style=”text-align:left” id=”text”>こんにちは!</p>

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

そんな時の方法です。

入力フォーム

HTMLで入力する欄のことをフォームと言います。

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

<input type=”text” value=”” id=”name“/>

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

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

今回はnamevalueに格納された名前をid=”text”のpタグに追加します。
そこで2つの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というのはタグとタグに囲まれた中の部分です。

<タグ>ここがinnerHTML</タグ>

文章を追加する

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

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

JavaScriptのほかの記事
ボタンを押したら画像を表示

関連コンテンツ

スポンサーリンク

「ボタンを押すと名前を追加」への1件のフィードバック

  1. はじめまして。
    凄いです~\(^o^)/
    ファンブログでもこんなに楽しい事できるのですね。
    とても 勉強になります。

    また おじゃましたいと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください