2020-06-16に更新

textboxに文字を入力し、検索ボタンを押すと入力した文字がdocument部分に出力されるプログラムを作成しています。作成した以下のコードをブラウザ上で確認すると、コンソールにエラーが表示されます。

エラーの解消方法を教えてください。使用しているブラウザはClomeです。
発生するエラー

Uncaught TypeError: Cannot read property 'word' of null
    at HTMLFormElement.document.getElementById.onsubmit

ーーーーーーーーーーーーーーーーー
作成したコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>template</title>
<link href="../../_common/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="header-contents">
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</div><!-- /.header-contents -->
</header>
<div class="main-wrapper">
<section>
    <form action="#" id="form">
        <input type="text" name="word">
        <input type="submit" value="検索">
    </form>
    <p id="output"></p>
</section>
</div><!-- /.main-wrapper -->
<footer>JavaScript Samples</footer>
<script>
    'use strict';
    document.getElementById('form').onsubmit=function(event){
        event.preventDefault();
        const search= document.getElementById('from').word.value;
        document.getElementById('output').textContent=`「${search}」の検索中...`;
    };
</script>
</body>
</html>
ツイッターでシェア
みんなに共有、忘れないようにメモ

hiiragijin1210
コメント