コンソールに出力できない

テキストエリアで入力した内容を、コンソールに出力したいのですが、下の画像のようにエラーがでてしまいます。

エラー内容では、valueを読み込むことができないと書いてありますが、どこをなおせばいいのかわかりません。

質問
エラーを直すためには、どこを修正すればいいでしょうか？

大変恐縮ですが、ご回答いただけると幸いです。

よろしくお願いします。

念のために、URLを掲載させていただきます。

HTML

        <div class="bar2">
          <p class="opinion">
            ご意見箱
          </p>
          <section>
            <form action="#" id="form">
              <textarea class="text"></textarea>
              <input type="submit" name="my_name" value ="送信" class="submit">
            </form>
            <p id= "output"></p>
          </section>
        </div>

CSS

.bar2{
  width:210px;
  height:280px;
  font-size:14px;
  display:inline-block;
  background-color:#fff2de;
  position:relative;
}
.opinion{
  position:absolute;
  top:5px;
  left:70px;
}
.text{
  position:absolute;
  top:50px;
  left:15px;
  height:170px;
}

.submit{
  position:absolute;
  top:85%;
  left:37%;
}

Javascript


<script>
document.getElementById('form').onsubmit = function() {
	console.log('クリックされました');
};
</script>

<script>
document.getElementById('form').onsubmit = function() {
	var search = document.getElementById('form').word.value;
	document.getElementById('output').textContent = '『' + search + '』の検索中...';
	return false;
};
</script>

</body>
</html>

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

回答1件

ベストアンサー

wordプロパティというプロパティは存在しません。getElementById関数の代わりにquerySelector関数を使ってみてはいかがでしょうか？

HTML
1<html>
2<head>
3    <meta charset="UTF8">
4    <title>タイトル</title>
5    <style type="text/css">
6        * {
7            margin: 0;
8            padding: 0;
9        }
10
11        .bar2 {
12            width: 210px;
13            height: 280px;
14            font-size: 14px;
15            display: inline-block;
16            background-color: #fff2de;
17            position: relative;
18        }
19
20        .opinion {
21            position: absolute;
22            top: 5px;
23            left: 70px;
24        }
25
26        .text {
27            position: absolute;
28            top: 50px;
29            left: 15px;
30            height: 170px;
31        }
32
33        .submit {
34            position: absolute;
35            top: 85%;
36            left: 37%;
37        }
38    </style>
39</head>
40<body>
41<div class="bar2">
42    <p class="opinion">
43        ご意見箱
44    </p>
45    <section>
46        <form action="#" id="form">
47            <textarea class="text"></textarea>
48            <input type="submit" name="my_name" value="送信" class="submit">
49        </form>
50        <p id="output"></p>
51    </section>
52</div>
53<script>
54    document.getElementById("form").onsubmit = function () {
55        var search = document.querySelector("form > textarea[class=text]").value;
56        console.log("クリックされました");
57        document.getElementById("output").textContent = "『" + search + "』の検索中...";
58        return false;
59    };
60</script>
61</body>