保持した値が１づつ小さくなっていく現象

保持した値(age)を常に表示するようにコードを入力したのですが、画面遷移を繰り返す（値を入力→確認画面→トップへ戻る→値を入力）とageの値が一つ小さくなっています。例　3を選択→画面遷移後2になっている。
なぜだがわからないので、ご教授いただけると幸いです。
jsの入力内容表示のところです。

<!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>

//ドロップダウンリストの処理
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 = 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';
  }

行動規範の内容に同意します

回答1件

ベストアンサー

html
1   <tr>
2    <th>年齢</th>
3    <td><select name="age" id="age">
4     <option></option> <!-- ←ここを消す -->
5     </th><th>歳</td>
6  </tr>

ここのoption消してみてはいかがでしょうか。

投稿2021/06/15 02:54

yoshihiko555

総合スコア84

tomokia

2021/06/15 03:33

治りました。ありがとうございました。ちなみになぜここを消したほうが良いと分かったのでしょうか。教えていただけると幸いです。

yoshihiko555

2021/06/15 04:36 編集

for(var i=0;i<=130;i++){ if(sessionStorage.getItem("age") == i){ document.getElementById("age")[i + 1].selected = true; } } ここのFor文でageのoption要素のn番目に対して処理を入れていますが、この際に、tomokiaさんが想定しているoption要素に対して処理を行えていなかったのが、今回の問題の原因となります。このFor文実行時のageのoption要素の数を見てみると、 HTML上で定義してあったoptionと、JS上で生成するhiddenのoption、0 ~ 130までのoptionの計132のoptionが存在しています。 document.getElementById("age")[i + 1]で、indexを+1していることから、おそらくhiddenのoptionのindexをずらすことは、理解されているのかなと思いますが、HTMLで既に定義してあったoptionまで考慮されていなかったため、表記にずれが生じてしまっていました。なので、HTML上のoptionを削除することによって、optionの数を調整した次第です。また、document.getElementById("age")[i + 2]とすれば、HTML上のoptionを削除せずとも同じ結果になるはずです。

行動規範の内容に同意します