こんにちはAtsu1209です。
今日は最近jQueryに頼りすぎたので、jQueryを使わずにコードを書きます。
初めに
今日はフォームに入力した値をalertで表示します。
そしてjQueryの代わりにaddEventListenerを使います。
HTML
まずフォームを作ります
<!DOCTYPE html>
<html>
<head>
<title>HAHAHA</title>
<meta charset="UTF-8">
</head>
<body>
<form id="form">
<input type="text" id="input">
<button type="submit" id="btn">Submit</button>
</form>
</body>
</html>
ごく普通のフォームを作りました。
次に本題のJSを書きます。
JS
<script>
const form = document.getElementById("form");
const btn = document.getElementById("btn");
form.addEventListener("submit", function (event) {
event.preventDefault();
});
btn.addEventListener("click", function(){
const val = document.getElementById("input").value;
alert(val);
})
</script>
最後に
addEventListenerを使ってみて意外と便利なことがわかりました。
でもやはり楽なjQueryを使いたくなりますよね
ということで短くなりましたが今回は以上です
では