ログインページなどにあるメールやパスワードのテキスト文字列はJavaScriptを使うと取得することができます。
入力された文字列を同じページ内に出力するコードを書いてみました。
<form action="" method="get">
<div>
<label for="email">Enter your email: </label>
<input type="email" name="email" id="email" required />
</div>
<div>
<label for="pass">Enter your password: </label>
<input type="password" name="password" id="pass" required />
</div>
<div>
<input type="submit" value="Sign in" />
</div>
</form>
<p class="log"></p>
<p class="log2"></p>
<script type="text/javascript" src="static/sample.js"></script>メールとパスワードのテキストボックスに入力された値を、下にあるpタグに出力します。
ポイントはJSを１番最後に取り込んでいるところです。
最初に宣言してしまうと要素がnullのエラーが出ます。
// input要素のidを指定する
const email = document.querySelector('#email');
// 出力用のp要素のclass名と関数名をオブジェクトにして渡す。
email.addEventListener('input', {outputname: '.log',handleEvent:handleChange});
const pass = document.querySelector('#pass');
pass.addEventListener('input', {outputname: '.log2',handleEvent:handleChange});
// inputの値が変わるたびに呼ばれる。
function handleChange(event){
const value = event.target.value;
document.querySelector(this.outputname).innerHTML = value;
}addEventListernerで引数を渡す方法で悩みましたが、オブジェクトにして渡すことができました。
