NokkunBlog

Keep technology simple.

JavaScriptでテキストボックスに入力された値を取得する

ログインページなどにあるメールやパスワードのテキスト文字列は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を1番最後に取り込んでいるところです。

最初に宣言してしまうと要素が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で引数を渡す方法で悩みましたが、オブジェクトにして渡すことができました。