ボタンを押しても何も出ない（文字とチェックボックスを出すプログラム）

前提・実現したいこと

ボタンを押す
↓
スタミナ1（checkbox）　　パワー1（checkbox）　　守備1（checkbox）　　絆50（checkbox）

発生している問題・エラーメッセージ

何も出ない

該当のソースコード

<!doctype html>
<head>
<title>名将甲子園 ミッション管理</title>
<link rel="stylesheet" href="style.css">

<meta http-equiv="content-type" charset="utf-8">
</head>


<body>
<h2>名将甲子園 ミッション管理</h2>
<form name="form1">
<select name="position">
<option value="pitch">投手</option>
<option value="catch">捕手</option>
<option value="naiya">内野手</option>
<option value="gaiya">外野手</option>
</select>

<select name="rarity" required>
 <option value="" class="msg" disabled selected>-----レア度を選択-----</option>
<option value="N">N</option>
<option value="R">R</option>
<option value="SR">SR</option>
</select>

<select name="sensyu" required>
<option value="" class="msg" disabled selected>-----選手を選択-----</option>
<option value="矢部">矢部</option>
<option value="香本">香本</option>
<option value="星井">星井</option>
<option value="猪狩守">猪狩守</option>
</select>

<br>
<input type="button" value="追加" onclick="mission()">
<pre><div id="wrapper"></div></pre>
</form>

<script>
//class tsuika{
var br,no1,no2,no3,pos1,pos2,rar1,rar2,sen1,sen2,input;

br=document.createElement("br");

no1=document.form1.position.selectedIndex;	//選択肢を取得.1
pos1=document.form1.position.options[no1].value;	//選択肢を取得.2
pos2=document.createTextNode(pos1);	//文字に変換

no2=document.form1.rarity.selectedIndex;	//選択肢を取得.1
rar1=document.form1.rarity.options[no2].value;	//選択肢を取得.2
rar2=document.createTextNode(rar1);	//文字に変換

no3=document.form1.sensyu.selectedIndex;	//選択肢を取得.1
sen1=document.form1.sensyu.options[no3].value;	//選択肢を取得.2
sen2=document.createTextNode(sen1);	//文字に変換

input = document.createElement('input');
input.setAttribute('type', 'checkbox'); // [or] input.type = 'checkbox';

/*
document.getElementById("wrapper").append(pos2);	//追加
document.getElementById("wrapper").append(input);	//追加
space();
document.getElementById("wrapper").append(rar2);	//追加
document.getElementById("wrapper").append(input);	//追加
space();
document.getElementById("wrapper").append(sen2);	//追加
document.getElementById("wrapper").append(input);	//追加
space();
*/



function br(){
a=document.createElement("br"),
document.getElementById("wrapper").append(a);
}


function cbx(){
	//cb=document.createElement('input type="checkbox"'), [False]
	document.getElementById("wrapper").append("input");
}


function space(){
document.getElementById("wrapper").append("　");	//追加
}

/*function moji(str){
document.getElementById("wrapper").append("str");	//追加
}*/

function nor(a,b,c,d){
	document.getElementById("wrapper").append(a);
	cbx();
	space();
	document.getElementById("wrapper").append(b);
	cbx();
	space();
	document.getElementById("wrapper").append(c);
	cbx();
	space();
	document.getElementById("wrapper").append(d);
	cbx();
	space();
}


function rare(a,b,c,d,e,f,g,h){
	nor(a,b,c,d);
	document.getElementById("wrapper").append(e);
	cbx();
	space();
	document.getElementById("wrapper").append(f);
	cbx();
	space();
	document.getElementById("wrapper").append(g);
	cbx();
	space();
	document.getElementById("wrapper").append(h);
	cbx();
	space();
}

function sr(a,b,c,d,e,f,g,h,i,j){
	rare(a,b,c,d,e,f,g,h);
	document.getElementById("wrapper").append(i);
	cbx();
	space();
	document.getElementById("wrapper").append(j);
	cbx();
	space();

}

function mission(){
if(pos2=="pitch"){
		nor("スタミナ１","パワー1","守備１","絆50");
		if(rar2=="N"){
			switch(sen1){
			case "猪狩守":
				nor("スタミナ１","パワー1","守備１","絆50");
				break;
			//case "":
				//nor("");
				//break;
			default:
				document.getElementById("wrapper").append("error");
			}
		}
	}
}





</script>
</body>

試したこと

わからない

補足情報（FW/ツールのバージョンなど）

pos2は文字が取得できている
rar2,sen2は文字が取得できていない

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

回答2件

質問に不必要なコードが多かったので清書しました。
質問する際は不要なコメント・改行・コードは削除してください。

コードの大きな問題点は以下のとおりです。

文字に変換でcreateTextNodeが使われているが、valueで取得したものは文字列なので不要
valueの取得がmission関数内で実行されていない

html
1<h2>名将甲子園 ミッション管理</h2>
2<form name="form1">
3  <select name="position">
4    <option value="pitch">投手</option>
5    <option value="catch">捕手</option>
6    <option value="naiya">内野手</option>
7    <option value="gaiya">外野手</option>
8  </select>
9
10  <select name="rarity" required>
11    <option value="" class="msg" disabled selected
12      >-----レア度を選択-----</option
13    >
14    <option value="N">N</option>
15    <option value="R">R</option>
16    <option value="SR">SR</option>
17  </select>
18
19  <select name="sensyu" required>
20    <option value="" class="msg" disabled selected
21      >-----選手を選択-----</option
22    >
23    <option value="矢部">矢部</option>
24    <option value="香本">香本</option>
25    <option value="星井">星井</option>
26    <option value="猪狩守">猪狩守</option>
27  </select>
28
29  <br />
30  <input type="button" value="追加" onclick="mission()" />
31  <pre><div id="wrapper"></div></pre>
32</form>
33
34<script>
35function space() {
36  document.getElementById("wrapper").append("　"); //追加
37}
38
39function nor(a, b, c, d) {
40  document.getElementById("wrapper").append(a);
41  space();
42  document.getElementById("wrapper").append(b);
43  space();
44  document.getElementById("wrapper").append(c);
45  space();
46  document.getElementById("wrapper").append(d);
47  space();
48  document.getElementById("wrapper").innerHTML += '<hr>';
49}
50
51function mission() {
52  var no1 = document.form1.position.selectedIndex; //選択肢を取得.1
53  var pos1 = document.form1.position.options[no1].value; //選択肢を取得.2
54
55  var no2 = document.form1.rarity.selectedIndex; //選択肢を取得.1
56  var rar1 = document.form1.rarity.options[no2].value; //選択肢を取得.2
57
58  var no3 = document.form1.sensyu.selectedIndex; //選択肢を取得.1
59  var sen1 = document.form1.sensyu.options[no3].value; //選択肢を取得.2
60
61  if (pos1 === "pitch") {
62    if (rar1 === "N") {
63      switch (sen1) {
64        case "猪狩守":
65          nor("スタミナ2", "パワー2", "守備2", "絆50");
66          break;
67        default:
68          nor("スタミナ1", "パワー1", "守備1", "絆50");
69      }
70    }
71  }
72}
73</script>

投稿2019/07/14 13:17

yasutomi

総合スコア2937

bluecity_kaja

2019/07/14 13:48

ありがとうございます！

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

ベストアンサー

function missionが始まる前のselectをグローバル変数時点で登録されてしまい、それが更新されなくなるので、pos2がpitchだけ保存されている状態になります。onclickが動作してから変数を入れる必要があるので、以下のようにプログラムを変更する必要があります。また、if文の{や}の入れる箇所が適切ではなかったのも原因かと思います。

 function mission(){
      no1=document.forms.form1.position.selectedIndex;
      pos1=document.forms.form1.position.options[no1].value;
      pos2=document.createTextNode(pos1);
      no2=document.forms.form1.rarity.selectedIndex;    //選択肢を取得.1
      rar1=document.forms.form1.rarity.options[no2].value;    //選択肢を取得.2
      rar2=document.createTextNode(rar1);
      no3=document.forms.form1.sensyu.selectedIndex;    //選択肢を取得.1
      sen1=document.forms.form1.sensyu.options[no3].value;    //選択肢を取得.2
      sen2=document.createTextNode(sen1);
      
      if(pos1=="pitch"){
              nor("スタミナ１","パワー1","守備１","絆50");
      } else if(rar1=="N"){
        switch(sen1){
          case "猪狩守":
            nor("スタミナ１","パワー1","守備１","絆50");
            break;
          default:
            document.getElementById("wrapper").append("error");
            break;
        }
      }

投稿2019/07/14 10:24