formタグ内でのinput type="file"をjavascriptで制御した時にイベントが正常に行われない

Question

formタグ内でのみjavascriptのイベントが発生しません。
想定している動きとしては、
アップロードボタンの押下を行うとコンソールに「hello」を表示させます。
下記のコードだとエラーが出ます。

<form>
  <button id="button" class="button">アップロード</button>
  <input style="display: none;" class="input" id="input" type="file">
</form>

const button = document.getElementById('button');
const input = document.getElementById('input');

button.addEventListener("click", () => {
    input.click();
});
input.addEventListener('change', (event) => {
     console.log('hello');
});
});

しかしbuttonとinputをformタグから出すとはエラーが出ません。
正常にコンソールへ「hello」が出力されます。

<button id="button" class="button">アップロード</button>
<input class="input" id="input" type="file">

なにが起きているのかわからないので対策が打てなくて困っています。
お力をお借りできればと思います。
よろしくお願いします。

Comments

[maisumakun]

> 下記のコードだとエラーが出ます。

発生したエラーをご提示ください。

Answer 1

単純にformでくくるとbuttonがサブミットするからでしょうね

<button id="button" type="button">アップロード</button>

Answer 2

<form>
  <button id="button" class="button">アップロード</button>
  <input style="visible: hidden; height:0; width: 0" class="input" id="input" type="file">
</form>

こうすれば幸せになれます。

Comments

[退会済みユーザー]

申し訳ないですが、今回の質問内容とは趣旨の違う回答になります。