Form

by yshrkn

HTML

<fieldset id="account">
  <legend>User</legend>
  <label>ID:
    <input type="text" name="id">
  </label>
  <br>
  <label>Password:
    <input type="password" name="password">
  </label>
</fieldset>

<fieldset id="script-type">
  <legend>Script Type</legend>
  <label>
    <input type="radio" name="script" value="js">JavaScript</label>
  <label>
    <input type="radio" name="script" value="cs">CoffeeScript</label>
  <label>
    <input type="radio" name="script" value="ts">TypeScript</label>
</fieldset>

<fieldset id="experience">
  <legend>Experience</legend>
  <select name="experience">
    <option value="">選択してください</option>
    <option value="newbie">初級</option>
    <option value="intermidiate">中級</option>
    <option value="pro">プロ！</option>
  </select>
</fieldset>

<fieldset id="skillset">
  <legend>Skillset</legend>
  <label>
    <input type="checkbox" name="java">Java</label>
  <label>
    <input type="checkbox" name="c">C</label>
  <label>
    <input type="checkbox" name="python">Python</label>
  <label>
    <input type="checkbox" name="ruby">Ruby</label>
</fieldset>

<button id="clear">Clear</button>
<button id="autoFill">Auto Fill</button>

CSS

body {
  padding: 15px;
}

fieldset {
  border: 1px solid #ccc;
  color: #333;
  background-color: #fff;
  margin: 15px 0;
}

JavaScript

/**
 * #autoFillボタンをクリックすると、フォームの各要素が自動で入力・選択されるようにしてください。
 * 入力・選択内容は適当で構いません。
 *
 * また #autoFill ボタンをクリックすると、すべての要素をクリア（初期状態に戻す）されるようにしてください。
 */

var clearBtn = document.getElementById('clear');
var autoFillBtn = document.getElementById('autoFill');

var formParts = [
  { "account": document.querySelectorAll('#account input') },
  { "scriptType": document.getElementsByName('script') },
  { "experience": document.querySelectorAll('#experience select') },
  { "skillset": document.querySelectorAll('#skillset input') }
];

//オートフィル設定用
var myInfo = {
  id: "yoshihara",
  pass: "yoshi123",
  scriptType: ["js"],
  experience: "newbie",
  skillset: ["java", "ruby"]
}

//イベント登録リスト
var eventLists = [
  {
    element: autoFillBtn,
    eventType: "click",
    fnc: function() {
      throwFromSetter(formParts, "set");
    }
  },
  {
    element: clearBtn,
    eventType: "click",
    fnc: function() {
      throwFromSetter(formParts, "reset");
    }
  }
];

//イベント登録
function addEventListeners(eventLists) {
  eventLists.forEach(function(obj) {
    obj["element"].addEventListener(obj.eventType, obj.fnc);
  });
}

//フォーム処理
function setForm(formPart, type) {

  if (type === "reset") {
    //フォームリセット処理
    switch (formPart.type) {
      case "text":
      case "password":
        formPart.value = "";
        break;
      case "radio":
        formPart.checked = false;
        break;
      case "select-one":
        formPart.selectedIndex = 0;
      case "checkbox":
        formPart.checked = false;
        break;
      default:
    }
  } else {
    //オートフィル処理
    switch (formPart.type) {
      case "text":
        formPart.value = myInfo.id;
        break;

      case "password":
        formPart.value = myInfo.pass;
        break;

      case "radio":
        myInfo.scriptType.forEach(function (element) {
          if (element === formPart.value) {
            formPart.checked = true;
          }
        });
        break;

      case "select-one":
       ...