JavaScriptのfunctionについて

以下のようにコードを書くと
ボタンを押せば「Hello World」が表示されますがbuttonが消えてしまいます
このHello Worldをbuttonの下に表示するようにするにはどうすればいいでしょうか？

lang
1<!doctype html>
2
3<head>
4  <meta charset="utf-8">
5</head>
6
7<body>
8  <input type="button" value="表示" onclick="fun1()">
9  <script>
10    function fun1(){
11      document.write("Hello World");
12    }
13  </script>
14
15</body>
16
17</html>

行動規範の内容に同意します

回答4件

lang
1<button id="button01">CLICK!</button>
2
3<script>
4	document.getElementById("button01").addEventListener("click", function(){
5		document.getElementById("button01").innerHTML = "Hello World";
6	}, false);
7</script>

こんな感じでいいと思うけど。

lang
1 <input type="button" value="表示" onclick="fun1()">

これでボタン表示するのではなく、普通に<button>タグ使うべき

lang
1document.getElementById("button01")

これはHTMLドキュメントのオブジェクトを取得している。
このオブジェクトにイベントリスナを付ければイベントが付けれるわけです。

lang
1addEventListener("click", Callback, false);

これがそのイベントリスナの部分

「"click"」の部分はイベントタイプを書く。
読み込んだ時は「"load"」とかのイベントタイプを書く事出来る。また色々種類があるので自分で調べてね

「Callback」はイベントは発生した時の処理が書かれた関数を入れる事が出来る。
上記例では無名関数をそのまま定義しているけど、「fun1」を書いてもいい。

ま〜大体こんな所ですねかね。

投稿2015/06/07 03:10

fukumi822

総合スコア228

ボタンをクリックしたら、 "Hello World" の表示/非表示を切り替えるものを作ってみました。
http://jsdo.it/katoy/gRy1

投稿2015/07/19 02:23

katoy

総合スコア22324

document.writeはDOM構築後(windowのDOMContentLoadedイベント後)に使うと他の要素が全て失われてしまう厄介な存在です(また、ここの質問にありますが、HTML5での使用は推奨されていないようです)

otnさんが簡単な方法を提示されているので
私は一般的な、document.createTextNodeを使った方法を載せておきます。

lang
1<!doctype html>
2
3<head>
4  <meta charset="utf-8">
5</head>
6
7<body>
8  <input type="button" value="表示" onclick="fun1()">
9  <script>
10    function fun1(){
11        // テキスト要素を作成
12        var textNode = document.createTextNode("Hello World");
13        // body内の最後の要素として追加
14        document.body.appendChild(textNode);
15    }
16  </script>
17
18</body>
19
20</html>

投稿2015/06/07 02:29

MAGP

総合スコア153

簡単には、

lang
1<!DOCTYPE html>
2<head>
3  <meta charset="utf-8">
4</head>
5<body>
6  <input type="button" value="表示" onclick="fun1()">
7  <div id="here"></div>
8  <script>
9    function fun1(){
10      document.getElementById("here").textContent="Hello World";
11    }
12  </script>
13</body>
14</html>