LoginSignup
x9jdzhcc72mxib2azgcyo
@x9jdzhcc72mxib2azgcyo

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

解説してほしいです。

Q&A
JavaScript

解決したいこと

解答例が出されたのですが、どういう意味なのかさっぱりなので解説してくれると恐縮です。
長々とコピペしましたが、分からない所はjsの入力内容表示についてです。

//入力内容表示
//ドロップダウンリストの処理
window.onload = function onLoad() {
    var age = document.getElementById("age");
    var df = document.createDocumentFragment();

    var option = document.createElement('option');
    option.setAttribute("hidden", "hidden");
    age.appendChild(option);

    for(var i=0; i<=130; i++){
        var option = document.createElement('option');
        option.value = Number(i);
        option.appendChild(document.createTextNode(i));
        df.appendChild(option);
    }
    age.appendChild(df);
    //入力内容表示
    if(sessionStorage.getItem("name1") !== null){
        document.getElementById("name1").defaultValue = sessionStorage.getItem("name1");
    }
    if(sessionStorage.getItem("name2") !== null){
        document.getElementById("name2").defaultValue = sessionStorage.getItem("name2");
    }
    var selectedAge = sessionStorage.getItem("age");
    for(var i=0;i<=130;i++){
        if(sessionStorage.getItem("age") == i){
            document.getElementById("age")[i + 1].selected = true;
        }
    }   
    if(sessionStorage.getItem("add1") !== null){
        document.getElementById("add1").defaultValue = sessionStorage.getItem("add1");
    }
    if(sessionStorage.getItem("add2") !== null){
        document.getElementById("add2").defaultValue = sessionStorage.getItem("add2");
    }
    if(sessionStorage.getItem("sumika1") !== null){
        document.getElementById("sumika1").defaultValue = sessionStorage.getItem("sumika1");
    }
    if(sessionStorage.getItem("sumika2") !== null){
        document.getElementById("sumika2").defaultValue = sessionStorage.getItem("sumika2");
    }
    if(sessionStorage.getItem("build") !== null){
        document.getElementById("build").defaultValue = sessionStorage.getItem("build");
    }
}

function option(){
    const name1 = document.getElementById("name1").value;
    const name2 = document.getElementById("name2").value;
    const age = document.getElementById("age").value;
    const add1 = document.getElementById("add1").value;
    const add2 = document.getElementById("add2").value;
    const sumika1 = document.getElementById("sumika1").value;
    const sumika2 = document.getElementById("sumika2").value;
    const build = document.getElementById("build").value;


//未入力チェック
if(name1.length === 0){
   alert("名前(姓)は必須入力です。");
   return;
}else if(name2.length === 0){
   alert("名前(名)は必須入力です。");
   return; 
}else if(age.length === 0){
   alert("年齢は必須選択です。");
   return;
}else if(add1.length === 0){
   alert("アドレスは必須入力です");
   return; 
}else if(add2.length === 0){
   alert("アドレス(確認用)は必須入力です。");
   return;
}else if(sumika1.length === 0){
   alert("住所は必須入力です。");
   return;
}else if(sumika2.length === 0){
   alert("住所2は必須入力です。");
   return;
}

//入力値チェック
if(name1.length > 20 || name2.length > 20){
  alert("名前は20字以内で入力してください。");
  return;
}else if(!add1.match(/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/)){
   alert("メールアドレスの形式が違います。");
   return;
}else if(name1.match(/[0-9]/) || name2.match(/[0-9]/)){
   alert("名前に数字は使用できません。");
   return;
}else if(add1 !== add2){
   alert("メールアドレスとメールアドレス(確認用)が一致しません。");
   return
 }

   sessionStorage.setItem('name1', name1);
    sessionStorage.setItem('name2', name2);
    sessionStorage.setItem('age', age);
    sessionStorage.setItem('add1', add1);
    sessionStorage.setItem('add2', add2);
    sessionStorage.setItem('sumika1', sumika1);
    sessionStorage.setItem('sumika2', sumika2);
    sessionStorage.setItem('build', build);

    window.location.href = 'html 入力画面2.html';
  }

name1のところは、入力フォームの値です。

該当するソースコード

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="input1.css">
   <script type="text/javascript" src="input1.js" charset="shift_jis"></script>

 </head>


  <h2>1.基本情報入力</h2>
  <main>

 <table>



  <tr>
    <th>名前（姓）</th>
    <td><input id="name1" ></td>
  </tr>

  <tr>
    <th>名前（名）</th>
    <td><input id="name2" ></td>
  </tr> 

   <tr>
    <th>年齢</th>
    <td><select name="age" id="age">
     <option></option>
     </th><th>歳</td>
  </tr>  

    <tr>
    <th>メールアドレス</th>
    <td><input id="add1" ></td>
  </tr>  

   <tr>
    <th>メールアドレス<br>（確認用）</th>
    <td ><input id="add2" ></td>
  </tr>  

   <tr>
    <th>住所1</th>
    <td><input id="sumika1" ></td>
  </tr>  

   <tr>
    <th>住所2</th>
    <td><input id="sumika2" ></td>
  </tr>  

  <tr>
    <th>建物名等</th>
    <td><input id="build"></td>
  </tr>


   <tr>
    <th></th>
    <th> <input type="submit" value="次へ" class="btn" onclick="option()"></th>
  </tr>  


 </table>
 </main>
 </container>
</html>
0

1Answer

overflowfl
@overflowfl

何がわからないかが良くわからないので、
見当違いな回答かもしれませんが、
ブラウザに保存している画面入力データの復元処理のようです。

このコードの概略は以下の通りです。

①画面表示の前処理の実行（window.onloadにセットされている関数の処理）
　①-1.年齢の選択肢のセット
　①-2.sessionStorageから入力データの復元　　←★問題の箇所？

②画面表示

③画面で値を入力

④「次へ」ボタンクリック

⑤画面遷移の前処理の実行（function option()の実行）
　⑤-1.入力データチェック
　⑤-2.入力データをsessionStorageに保存

⑥「html 入力画面2.html」へ画面遷移

問題の箇所の①-2の処理ですが、初めてアクセスしてきた場合は何も処理しません。

では、何のために記述されているかというと、次画面から戻ってきた際を想定した処理になっています。ここに記載された処理を消すと、次画面から戻ってきた際に入力値が復元されないと思います。

→⑤-2で次画面に遷移する前に入力されたデータは保存してます。
→動作確認まではしてないので、挙動が違っていたら申し訳ないです。

0Like

Your answer might help someone💌

LoginSign Up

Popular Questions