JavascriptでHTMLのフォームの内容を取得したい

前提・実現したいこと

Javascriptを初めてまだ数時間のレベルで基本的なこともわかっていないのですが、現在ブラウザ上のフォームに入力された数字を取得し、Javascriptで計算してその値をブラウザ上に表示するようなサイトを作ってみたいと考えています。
そのために、フォームに入力された数値を送信ボタンを押した際に、Chromeのconsoleに表示させたいのですがうまくいきません。

発生している問題・エラーメッセージ

フォームに入力された値をqueryselectordeで取得し、console.logを使ってその値をChromeのconsole上に出力してみたのですが何も表示されません。

該当のソースコード

Javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7  <form id="form">
8    <input type="text" id="text">
9    <input type="submit" value="送信">
10  </form>
11
12  <script type="text/javascript">
13    window.addEventListener('DOMcontentloaded', e =>{
14      let elform = document.querySelector("#form");
15      let eltext = document.querySelector("#text");
16      elform.addEventListener('submit', e =>{
17        console.log(eltext.value);
18        e.preventDefault();
19      });
20    });
21  </script>
22
23</body>
24</html>
25
26

試したこと

Chromeでデバック

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

js
1    window.addEventListener('DOMcontentloaded', e =>{

DOMContentLoaded です。

投稿2021/04/16 07:17

int32_t

総合スコア21012

numigo3

2021/04/16 07:24

ありがとうございます！できました！本当に初歩的な間違いでした、これから頑張って勉強していきたいと思います

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！