質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 896

sanag

score 16

 前提・実現したいこと

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

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

問題の
出来ない理由ですが、関数を2つ(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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/11/29 00:06

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

    キャンセル

  • sanag

    2018/11/29 00:07

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

    キャンセル

  • sanag

    2018/11/29 00:17

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

    キャンセル

回答 1

checkベストアンサー

+3

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' ]();
}

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

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/01 02:42 編集

    2パターンを試してみたのですが、

    1.そのまま入れてみたのと、
    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' ]();
    }
    }

    2.関数の外に出して、グローバル変数として扱う?
    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' ]();
    }
    }

    という風にやってみたのですが、
    上手く作動できなかったです。すいません。この辺りは完全に勉強不足でして。

    頂いたURLは早速、明日勉強してみます!!ありがとうございます!!

    キャンセル

  • 2018/12/01 02:50

    > 上手く作動できなかったです。
    とは? 提示しているものはデベロッパーツールのコンソールに値が出るだけですよ。

    【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
    https://www.buildinsider.net/web/chromedevtools/01

    キャンセル

  • 2018/12/02 01:30

    コンソルログに表示できました。昔、出し方が分からず、困っているところでした。

    すいません。まだ無名関数について理解が出来ておらず、もう一度勉勉強しなおしてきます。
    ログは保存して分かるようになります。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る