HTMLの「button」と「input type="button"」でクリックイベントが変わる
解決したいこと
javascriptである機能を実装中に直面したので、気になり投稿致しました。
ボタンを押したらinputの入力フォームにある値をHTMLに文字で出力するというよくある機能を作成していたのですが、
■buttonタグで作成 → クリックイベント発生後、一瞬追加されすぐ消える。
■input type="button"で作成 → クリックイベント発生後出力が残り続ける。
という差ができました。
これはどうしてこのような差ができるのでしょうか。
ご教示の程よろしくお願い致します。
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<label for="name">氏名</label>
<input type="text" name="name" id="name"><br>
<label for="age">年齢</label>
<input type="text" name="age" id="age"><br>
<label for="gender">性別</label>
<input type="text" name="gender" id="gender"><br>
<input type="button" id="button" value="送信">
<!-- or -->
<button id="button">送信</button>
</form>
<div id="result">
</div>
<script src="../dist/bundle.js"></script>
</body>
</html>
※Typescript
const button: HTMLInputElement = document.getElementById(
"button"
) as HTMLInputElement;
const inputName: HTMLInputElement = document.getElementById(
"name"
) as HTMLInputElement;
const inputAge: HTMLInputElement = document.getElementById(
"age"
) as HTMLInputElement;
const inputGender: HTMLInputElement = document.getElementById(
"gender"
) as HTMLInputElement;
const result: HTMLElement = document.getElementById("result") as HTMLElement;
button.addEventListener(
"click",
(e) => {
const nameValue = inputName.value;
const ageValue = inputAge.value;
const genderValue = inputGender.value;
const p = document.createElement("p");
const text = document.createTextNode(
`${nameValue} : ${ageValue} : ${genderValue}`
);
p.appendChild(text);
result.appendChild(p);
}
);
0
