input dateの値を取得して表示したい

Question

前提

input date の値を取得して表示したいのですがうまく行きません。

実現したいこと

input type="date"
が変更されたときに、vale値を取得して表示したいです。

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

以下サイトを参考にそのまま書いてみても動かずです。
何か足りないものがあるのでしょうか・・・？

▼参考にしたサイト
https://codepen.io/yochans/pen/oNGzXWZ

▼コード

<style type="text/css">
	body {
	padding: 0;
	margin: 10px;
}

p {
	padding: 10px;
}

.container {
	padding: 10px;
}

input[type=date] {
	font-size: 18px;
}
	</style>
	<script type="text/javascript">
		let date = document.querySelector(`input[type='date'][name='date']`);

	date.addEventListener(`change`, () => {
		document.querySelector(`#output`).inne
	</script>
	
	<div class="container">
  <input type="date" name="date">
  <p id="output">Change the Date</p>
</div>

ものすごく初歩的なことなのだと思うのですが、教えていただける方がいましたらありがたいです。
何卒ご助言よろしくお願いいたします。

Comments

[m.ts10806]

document.querySelector(`#output`).inne

途中でコード切れてるように見えますが、実際のコードですか？

[int32_t]

ブラウザの開発者ツールのコンソールにエラーが出ていると思うので、それを質問文に含めてください。

Answer 1

<script>
document.addEventListener('change', e => {
  if(e.target.matches('[name=date]')){
    document.querySelector('#output').textContent=e.target.value;
  }
});
</script>
<div class="container">
<input type="date" name="date">
<p id="output">Change the Date</p>
</div>

Answer 2

script の置き場所もよくないです。

JavaScriptを書く場所や読み込む場所はどこがいいのか？ – CodeAid-Lab（コードエイド・ラボ）

Answer 3

script内のコピペが上手く出来てないのだと思います。

<script>
  let date = document.querySelector("input[type='date'][name='date']");

  date.addEventListener("change", () => {
    document.querySelector("#output").innerHTML = date.value;
  });
</script>

で、上手くいくはずです。