javascriptでfor文を使い、代入される関数名の数値を変更したい。

前提・実現したいこと

javascriptで作っています。
サイコロの出目結果を押すと、出目の欄の6行が100面のサイコロの数字結果がランダムで出てきます。
それに伴って、環境の行のセレクトが自動で動き、反映されます。

今はボタンを押すと、変更できますが、
これをforを使い、小3までや小4までと好きなように
制御できるようにしたいと思っていますが、
上手く設定できません。

問題の
出来ない理由ですが、関数を２つ（DiceRollとdeme1_change）使っており、
その中の『deme1_change』の数字が上手く変更できませんでした。

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

//100の出目の結果を反映する　ここをfor文にしたい。
function Dice_deme(){
    document.form1.deme1.value = DiceRoll(100) ,deme1_change();
    document.form1.deme2.value = DiceRoll(100) ,deme2_change();
    document.form1.deme3.value = DiceRoll(100) ,deme3_change();
    document.form1.deme4.value = DiceRoll(100) ,deme4_change();
}

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>SamPle</title>
<script type="text/javascript">
<!--
function DiceRoll(number) {
	var dice1 = Math.floor(Math.random() * number) + 1; 
	return dice1;
}



/*出目の環境が即時反映する。まとめ*/
//出目を環境に反映する
function deme1_change(){
	if(document.form1.deme1.value <= 10){
		document.form1.kankyou1.selectedIndex = 1;
	} else if (document.form1.deme1.value <= 20){
		document.form1.kankyou1.selectedIndex = 2;
	} else if (document.form1.deme1.value <= 30){
		document.form1.kankyou1.selectedIndex = 3;
	} else if (document.form1.deme1.value <= 40){
		document.form1.kankyou1.selectedIndex = 4;
	} else if (document.form1.deme1.value <= 50){
		document.form1.kankyou1.selectedIndex = 5;
	} else if (document.form1.deme1.value <= 60){
		document.form1.kankyou1.selectedIndex = 6;
	} else if (document.form1.deme1.value <= 70){
		document.form1.kankyou1.selectedIndex = 7;
	} else if (document.form1.deme1.value <= 80){
		document.form1.kankyou1.selectedIndex = 8;
	} else if (document.form1.deme1.value <= 90){
		document.form1.kankyou1.selectedIndex = 9;
	} else if (document.form1.deme1.value <= 95){
		document.form1.kankyou1.selectedIndex = 10;
	} else if (document.form1.deme1.value <= 100){
		document.form1.kankyou1.selectedIndex = 11;
	}
}

//出目を環境に反映する
function deme2_change(){
	if(document.form1.deme2.value <= 10){
		document.form1.kankyou2.selectedIndex = 1;
	} else if (document.form1.deme2.value <= 20){
		document.form1.kankyou2.selectedIndex = 2;
	} else if (document.form1.deme2.value <= 30){
		document.form1.kankyou2.selectedIndex = 3;
	} else if (document.form1.deme2.value <= 40){
		document.form1.kankyou2.selectedIndex = 4;
	} else if (document.form1.deme2.value <= 50){
		document.form1.kankyou2.selectedIndex = 5;
	} else if (document.form1.deme2.value <= 60){
		document.form1.kankyou2.selectedIndex = 6;
	} else if (document.form1.deme2.value <= 70){
		document.form1.kankyou2.selectedIndex = 7;
	} else if (document.form1.deme2.value <= 80){
		document.form1.kankyou2.selectedIndex = 8;
	} else if (document.form1.deme2.value <= 90){
		document.form1.kankyou2.selectedIndex = 9;
	} else if (document.form1.deme2.value <= 95){
		document.form1.kankyou2.selectedIndex = 10;
	} else if (document.form1.deme2.value <= 100){
		document.form1.kankyou2.selectedIndex = 11;
	}
}
//出目を環境に反映する
function deme3_change(){
	if(document.form1.deme3.value <= 10){
		document.form1.kankyou3.selectedIndex = 1;
	} else if (document.form1.deme3.value <= 20){
		document.form1.kankyou3.selectedIndex = 2;
	} else if (document.form1.deme3.value <= 30){
		document.form1.kankyou3.selectedIndex = 3;
	} else if (document.form1.deme3.value <= 40){
		document.form1.kankyou3.selectedIndex = 4;
	} else if (document.form1.deme3.value <= 50){
		document.form1.kankyou3.selectedIndex = 5;
	} else if (document.form1.deme3.value <= 60){
		document.form1.kankyou3.selectedIndex = 6;
	} else if (document.form1.deme3.value <= 70){
		document.form1.kankyou3.selectedIndex = 7;
	} else if (document.form1.deme3.value <= 80){
		document.form1.kankyou3.selectedIndex = 8;
	} else if (document.form1.deme3.value <= 90){
		document.form1.kankyou3.selectedIndex = 9;
	} else if (document.form1.deme3.value <= 95){
		document.form1.kankyou3.selectedIndex = 10;
	} else if (document.form1.deme3.value <= 100){
		document.form1.kankyou3.selectedIndex = 11;
	}
}
//出目を環境に反映する
function deme4_change(){
	if(document.form1.deme4.value <= 10){
		document.form1.kankyou4.selectedIndex = 1;
	} else if (document.form1.deme4.value <= 20){
		document.form1.kankyou4.selectedIndex = 2;
	} else if (document.form1.deme4.value <= 30){
		document.form1.kankyou4.selectedIndex = 3;
	} else if (document.form1.deme4.value <= 40){
		document.form1.kankyou4.selectedIndex = 4;
	} else if (document.form1.deme4.value <= 50){
		document.form1.kankyou4.selectedIndex = 5;
	} else if (document.form1.deme4.value <= 60){
		document.form1.kankyou4.selectedIndex = 6;
	} else if (document.form1.deme4.value <= 70){
		document.form1.kankyou4.selectedIndex = 7;
	} else if (document.form1.deme4.value <= 80){
		document.form1.kankyou4.selectedIndex = 8;
	} else if (document.form1.deme4.value <= 90){
		document.form1.kankyou4.selectedIndex = 9;
	} else if (document.form1.deme4.value <= 95){
		document.form1.kankyou4.selectedIndex = 10;
	} else if (document.form1.deme4.value <= 100){
		document.form1.kankyou4.selectedIndex = 11;
	}
}


//100の出目の結果を反映する　ここをfor文にしたい。
function Dice_deme(){
	document.form1.deme1.value = DiceRoll(100) ,deme1_change();
	document.form1.deme2.value = DiceRoll(100) ,deme2_change();
	document.form1.deme3.value = DiceRoll(100) ,deme3_change();
	document.form1.deme4.value = DiceRoll(100) ,deme4_change();
}

/*ここから試した結果です。

function Dice_deme(){
	for(var i = 1; i <= 4; i++) {
	document.form1["deme" + i].value = DiceRoll(100) ,["deme" +i]_change();
	}
}
function Dice_deme(){
	for(var i = 1; i <= 4; i++) {
	document.form1["deme" + i].value = DiceRoll(100) ,deme+(i)_change();
	}
}

function Dice_deme(){
	for(var i = 1; i <= 4; i++) {
	document.form1["deme" + i].value = DiceRoll(100) ,deme+[i]_change();
	}
}

function Dice_deme(){
	for(var i = 1; i <= 4; i++) {
	document.form1["deme" + i].value = DiceRoll(100) ,["deme" +i + "_change()"];
	}
}

//サイコロは動いた。引数化して一応動いた？　[]で合っている気はするんだけど？
function Dice_deme(){
	for(var i = 1; i <= 4; i++) {
	document.form1["deme" + i].value = DiceRoll(100) ,("deme" +i + "_change()");
	}
}kann
 */

//-->
</script>
</head>
<body>
<input type="button" value="サイコロの出目結果" onClick="Dice_deme()">
<form name="form1">

<table border="1">
	<tr>
		<th>小学生</th>
		<th>環境</th>
		<th>出目</th>
	</tr>
	<tr>
		<th>小1</th>
		<th>
			<select name="kankyou1">
			<option>▼選択してください。</option>
			<option>01～10 自然に囲まれて育った</option>
			<option>11～20 武道が得意</option>
			<option>21～30 国語が得意</option>
			<option>31～40 算数が得意</option>
			<option>41～50 理科が得意</option>
			<option>51～60 社会が得意</option>
			<option>61～70 音楽が得意</option>
			<option>71～80 図工が得意</option>
			<option>81～90 家庭科が得意</option>
			<option>91～95 外国に留学していた</option>
			<option>96～00 遊んでばかりいてわんぱく</option>
			</select>
		</th>
		<th><input id=deme1 name="deme1" type="text" value="0" oninput="deme1_change()" ></th>
	</tr>
	<tr>
		<th>小2</th>
		<th>
			<select name="kankyou2">
			<option>▼選択してください。</option>
			<option>01～10 自然に囲まれて育った</option>
			<option>11～20 武道が得意</option>
			<option>21～30 国語が得意</option>
			<option>31～40 算数が得意</option>
			<option>41～50 理科が得意</option>
			<option>51～60 社会が得意</option>
			<option>61～70 音楽が得意</option>
			<option>71～80 図工が得意</option>
			<option>81～90 家庭科が得意</option>
			<option>91～95 外国に留学していた</option>
			<option>96～00 遊んでばかりいてわんぱく</option>
			</select>
		</th>
		<th><input id=deme2 name="deme2" type="text" value="0" oninput="deme2_change()" ></th>
	</tr>
	<tr>
		<th>小3</th>
		<th>
			<select name="kankyou3">
			<option>▼選択してください。</option>
			<option>01～10 自然に囲まれて育った</option>
			<option>11～20 武道が得意</option>
			<option>21～30 国語が得意</option>
			<option>31～40 算数が得意</option>
			<option>41～50 理科が得意</option>
			<option>51～60 社会が得意</option>
			<option>61～70 音楽が得意</option>
			<option>71～80 図工が得意</option>
			<option>81～90 家庭科が得意</option>
			<option>91～95 外国に留学していた</option>
			<option>96～00 遊んでばかりいてわんぱく</option>
			</select>
		</th>
		<th><input id=deme3 name="deme3" type="text" value="0" oninput="deme3_change()" ></th>
	</tr>
	<tr>
		<th>小4</th>
		<th>
			<select name="kankyou4">
			<option>▼選択してください。</option>
			<option>01～10 自然に囲まれて育った</option>
			<option>11～20 武道が得意</option>
			<option>21～30 国語が得意</option>
			<option>31～40 算数が得意</option>
			<option>41～50 理科が得意</option>
			<option>51～60 社会が得意</option>
			<option>61～70 音楽が得意</option>
			<option>71～80 図工が得意</option>
			<option>81～90 家庭科が得意</option>
			<option>91～95 外国に留学していた</option>
			<option>96～00 遊んでばかりいてわんぱく</option>
			</select>
		</th>
		<th><input id=deme4 name="deme4" type="text" value="0" oninput="deme4_change()" ></th>
	</tr>
</table>
</form>
	</body>
</html>

試したこと

コメントアウトに試した結果を載せてみました。
関数をfor文で直そうとしていますが上手くいきませんでした。
まだ勉強したばかりで、ソースが長くなっており、、
また、前回と同じような質問となってしまい、申し訳ございませんが、よろしくお願いします。

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

ここにより詳細な情報を記載してください。

kei344

2018/11/28 15:06

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

sanag

2018/11/28 15:07

すいません。上手く反映が出来なかったので、修正してみます。

sanag

2018/11/28 15:17

修正してみました。どうでしょうか？　まだ使い慣れてないものでおかしいところがございましたら教えていただけると助かります。

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

回答1件

ベストアンサー

js
1var func = {};
2func.deme1_change = function () { console.log( 1 ) };
3func.deme2_change = function () { console.log( 2 ) };
4func.deme3_change = function () { console.log( 3 ) };
5func.deme4_change = function () { console.log( 4 ) };
6
7for ( var i = 1; i <= 4; i++ ) {
8    func[ 'deme' + i + '_change' ]();
9}

ちなみにdocument.form1.deme1.value = DiceRoll(100) ,deme1_change();はDiceRoll(100)の値を捨てて、deme1_change()の無い返り値を代入しています。

js
1document.form1.deme1.value = DiceRoll(100);
2deme1_change();

【カンマ演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator

投稿2018/11/28 15:25

編集2018/11/28 15:33

kei344

総合スコア69398

sanag

2018/11/30 16:55 編集

ありがとうございます。ちゃんと返信が反映されていなかったらごめんなさい。『,』『;』に大きな違いがあるとは知りませんでした。一度に複数の関数を動かすには『,』それしかないと思っていました。そしてすいません。 <code> var func = {}; </code> を一日調べてみたのですが、勉強不足で置き場所がよく分からず、上手く起動させる事が出来ませんでした。申し訳ございません。もし、よろしければ教えて頂けると助かります。実際に動かして勉強したいと思います。ちなみにですが、今回のプログラムを下記の似たような形で動かす事は可能でしょうか？今、作っているプログラムの形に合わせてみたいのと、純粋に動かす事が可能なのか気になりまして。 <code> 現在作っているプログラムの一部です。1を繰り返し代入する。 function siz_if(){ for(var i = 1; i <= 4; i++) { document.form1["siz_tyu" + i].value = 1; } } ソースを参考に、作り直してみました。サイコロは動く状態です。 function Dice_deme(){ for(var i = 1; i <= 4; i++) { document.form1["deme" + i].value = DiceRoll(100) ;["deme" + i + "_change"](); } } </code> よろしくお願いします。 12月１日　01時55分すいません。やっぱりちゃんと反映されてなかったようです。コメント修正出来るようなのでやってみます。

kei344

2018/11/30 17:03

> 置き場所がよく分からず、上手く起動させる事が出来ませんでした。ご自身で試されたコードを質問文に追記してください。 > ソースを参考に、作り直してみました。肝心な箇所を参考にされていませんね。関数定義の方法を例示したつもりだったのですが。下記ページの「関数リテラル」のように関数を定義し、それをオブジェクトに入れているだけです。【【JavaScript】関数定義いろいろ - Qiita】 https://qiita.com/tomcky/items/988fc5f56d019e9dc097#%E9%96%A2%E6%95%B0%E5%BC%8F%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%86%E3%83%A9%E3%83%AB 【プロパティへのアクセス - JavaScript | MDN】 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors

sanag

2018/11/30 17:43 編集

2パターンを試してみたのですが、１．そのまま入れてみたのと、 function Dice_deme(){ var func = {}; func.deme1_change = function () { console.log( 1 ) }; func.deme2_change = function () { console.log( 2 ) }; func.deme3_change = function () { console.log( 3 ) }; func.deme4_change = function () { console.log( 4 ) }; for ( var i = 1; i <= 4; i++ ) { func[ 'deme' + i + '_change' ](); } } ２．関数の外に出して、グローバル変数として扱う？ var func = {}; func.deme1_change = function () { console.log( 1 ) }; func.deme2_change = function () { console.log( 2 ) }; func.deme3_change = function () { console.log( 3 ) }; func.deme4_change = function () { console.log( 4 ) }; function Dice_deme(){ for ( var i = 1; i <= 4; i++ ) { func[ 'deme' + i + '_change' ](); } } という風にやってみたのですが、上手く作動できなかったです。すいません。この辺りは完全に勉強不足でして。頂いたＵＲＬは早速、明日勉強してみます！！ありがとうございます！！

kei344

2018/11/30 17:50

> 上手く作動できなかったです。とは？提示しているものはデベロッパーツールのコンソールに値が出るだけですよ。【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 https://www.buildinsider.net/web/chromedevtools/01

sanag

2018/12/01 16:30

コンソルログに表示できました。昔、出し方が分からず、困っているところでした。すいません。まだ無名関数について理解が出来ておらず、もう一度勉勉強しなおしてきます。ログは保存して分かるようになります。

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