とりあえず全部書き直してみました(´∀`)
実行してみてください。
lang
1<!doctype html>
2<html>
3<head>
4 <title>テスト</title>
5 <script type="text/javascript">
6 <!--
7 function out()
8 {
9 var input = document.getElementById("inp1").value;
10 var output = document.getElementById("out1");
11 output.innerHTML += (input + '<br>');
12 }
13 //-->
14 </script>
15</head>
16<body>
17 入力<br>
18 <input type="text" id="inp1"><br>
19 <button onClick="out()">押す</button><br>
20 出力<br>
21 <hr>
22 <div id="out1"></div>
23</body>
24</html>
先ほどのソースの問題点は<style>と打ち間違えている以外にも、タイミングなどの問題があります。
lang
1 <style> // ⇐<script>
2 var str = document.getElementById("inp1").value;
3 //※左辺に代入するもの(書き変わる) 左辺に代入されるもの(書き変わらない)
4 str.innerHTML = out1; // ⇐ str と言う変数は文字なのでinnerHTMLというのはありません。
5 // out1は定義されてません。(定義されていても、おとなしくgetElementByIdしましょう(;´∀`))
6 // document.getElementById("out1").innerHTML = 文字;
7 </style> // ⇐</script>
先ほどのコードで動くようにしたものがこちら↓ 必要最小限のコードです(試行錯誤用)
lang
1 <script>
2 function out() {
3 // ID、inp1の内容を取得
4 var str = document.getElementById("inp1").value;
5 // 出力する<div>を取得(これを使って書き込みができます)
6 var output = document.getElementById("out1")
7 // いざ、書き込み 「+=」は追加 「=」は置き換えです
8 output.innerHTML += str; //追加してみる
9 }
10 </script>
ちなみに最小限のコードだけ書き換えると一瞬だけ表示されますが、formタグでリロードされてしまいます。
そんなときはformタグをはずしてみましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。