ジェネレータ #JavaScript

まだじゅんびです

js設置前のHTMLソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Password Generator</title>
    <style>
    body {
    background: #e0e0e0;
    font-family: 'Courier New', sans-serif;
    text-aline:center;
    }   

  .container {
    width: 320px;
    margin: 30px auto;
  }

  input[type="text"]{
    width: 380px;
    padding: 7px;
    border-radius: 3px;
    font-size: 24px;
    font-family: 'Courier New', sans-serif;
    text-align: center;
  }

  #btn {
    color: #fff;
    background: #00aaff;
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;

  }

  #btn:hover {
    opacity: 0.8;
  }

fieldset {
  margin-top: 10px;
  border: 1px dashed #aaa;
  border-radius: 5px;
  text-align: left;
}
fieldset p {
  text-align: center;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}


    </style>
</head>
<body>
<div class="container">
    <p><input type="text"></p>
  <p><div id="btn">Generate Password</div></p>
  <fieldset>
    <legend>Options</legend>
    <p>Length: <input type="range"></p>
    <p>
      Numbers?: <input type="checkbox">
      Symbol?: <input type="checkbox">
    </p>
  </fieldset>
</div>

</body>
</html>

js設置してみる
閉じタグbodyの箇所からjsを書き始める。
use strictを記載することによって厳密にエラーチェックをしてくれる。

sliderを動かした時にlabelの値を表示したいので、sliderを動かした時の値を取得する。

var slider = document.getElementById(`slider`);

sliderを動かした時のlabelの値を取得する

var label = document.getElementById(`label`);

メモ　
.change()について
changeは指定要素の値が変更された際に発生するイベントで、<input>、<textarea>、<select>要素専用のイベントです。また、セレクトボックス、チェックボックス、ラジオボタンは値が変更された際に即座にイベント発生とみなされますが、他の要素はフォーカスが外れるまで、イベント発生とはみなされません。

sliderが変わり終わったら、<span id="label">8</span>の数字を変えたい。labelのHTMLを変更すると書く。

slider.addEventListener(`change`, function() {
      label.innerHTML = this.value;
    });

動いた！
ここまでの発見、どうやらjavascriptのイベントはHTMLと連動しないと使えない、HTML要素専用のイベントというものがあるらしい。
セットで覚えていかないといけないっぽい。
初心者はこういうの独学だとなかなかわからなくてむずかしい。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Password Generator</title>
    <style>
    body {
    background: #e0e0e0;
    font-family: 'Courier New', sans-serif;
    text-aline:center;
    }   

  .container {
    width: 320px;
    margin: 30px auto;
  }

  input[type="text"]{
    width: 380px;
    padding: 7px;
    border-radius: 3px;
    font-size: 24px;
    font-family: 'Courier New', sans-serif;
    text-align: center;
  }

  #btn {
    color: #fff;
    background: #00aaff;
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;

  }

  #btn:hover {
    opacity: 0.8;
  }

fieldset {
  margin-top: 10px;
  border: 1px dashed #aaa;
  border-radius: 5px;
  text-align: left;
}
fieldset p {
  text-align: center;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}


    </style>
</head>
<body>
<div class="container">
    <p><input type="text"></p>
  <p><div id="btn">Generate Password</div></p>
  <fieldset>
    <legend>Options</legend>
    <p>Length(<span id="label">8</span>): <input type="range" id="slider" min="4" max="20"></p>
    <p>
      Numbers?: <input type="checkbox">
      Symbol?: <input type="checkbox">
    </p>
  </fieldset>
</div>
<script>
  (function() {
    `use strict`;

    var slider = document.getElementById(`slider`);
    var label = document.getElementById(`label`);

    slider.addEventListener(`change`, function() {
      label.innerHTML = this.value;
    });


  })();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Password Generator</title>
    <style>
    body {
    background: #e0e0e0;
    font-family: 'Courier New', sans-serif;
    text-aline:center;
    }   

  .container {
    width: 320px;
    margin: 30px auto;
  }

  input[type="text"]{
    width: 380px;
    padding: 7px;
    border-radius: 3px;
    font-size: 24px;
    font-family: 'Courier New', sans-serif;
    text-align: center;
  }

  #btn {
    color: #fff;
    background: #00aaff;
    padding: 7px;
    border-radius: 5px;
    box-shadow: 0 4px 0 #0088cc;
    cursor: pointer;

  }

  #btn:hover {
    opacity: 0.8;
  }

fieldset {
  margin-top: 10px;
  border: 1px dashed #aaa;
  border-radius: 5px;
  text-align: left;
}
fieldset p {
  text-align: center;
}

legend {
  font-weight: bold;
  padding: 0 10px;
}


    </style>
</head>
<body>
<div class="container">
    <p><input type="text" id="result"></p>
  <p><div id="btn">Generate Password</div></p>
  <fieldset>
    <legend>Options</legend>
    <p>Length(<span id="label">8</span>): <input type="range" id="slider" min="4" max="20"></p>
    <p>
      Numbers?: <input type="checkbox">
      Symbol?: <input type="checkbox">
    </p>
  </fieldset>
</div>
<script>
  (function() {
    `use strict`;

    var slider = document.getElementById(`slider`);
    var label = document.getElementById(`label`);
    var btn = document.getElementById(`btn`);
    var result = document.getElementById(`result`);

    function getPassword() {
      result.value = 'asdtekisut';
    }

    slider.addEventListener(`change`, function() {
      label.innerHTML = this.value;
    });

    btn.addEventListener(`click`, function() {
      getPassword();
      //result.value = 'asdtekisut';
    });

    result.addEventListener(`click`, function() {
      this.select();
    });
    getPassword();


  })();
</script>

</body>
</html>