成果物
htmlのフォームに入力した内容を受け取って,
コンソールに返すjavascriptを作りたいと思います。
前提知識
- 変数（javascript）
- 関数(javascript)
仕組み
コード
html側
formタグで、１行入力用のテキストエリアと、送信ボタンを作成します。
送信ボタンにはクリックするとnamePost()という関数が始まるようにしておきます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
<script type="text/javascript" src="./main.js" defer></script>
</head>
<body>
<form action="" >
<input type="text" id="yourName">
<input type="button" onClick="namePost()" value="送信">
</form>
</body>
</html>
javascript側
namePost()という関数を作ります。
const namePost = () =>{
const getName = document.getElementById("yourName").value;
console.log(getName);
}
javascript側から、htmlを参照するときに使う、document.getElementById（"id名"）の後ろに.valueをつけると、htmlで入力したものをjavascript
で受け取ることができます。
最後に、定義したgetNameをコンソールで表示させれば完了です。
参考サイト
https://techacademy.jp/magazine/21069
https://qiita.com/Teach/items/4b0104847be9f2960665?fbclid=IwAR0EoMAiMs5sBbQFMbUIEHWwBnpM4j26Ad_wUvhfybHuDtd-Gc6mfgg4Czc