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

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

ただいまの
回答率

89.63%

JavaScriptとラジオボタンの連動

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 2,122

ryoku

score 10

前提・実現したいこと

ラジオボタンで入力した値を使って配列に格納したデータを探し出し表示したい。

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

ラジオボタンを選択し、結果を出力しようとしても元のページに戻ってしまう。
また、以下のエラーメッセージが表示される。

Uncaught TypeError: Cannot read property 'length' of undefined

該当のソースコード

<form name="form1" action="">
    <input id="Radio11" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio11">選択肢 1</label><br/>
    <input id="Radio12" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio12">選択肢 2</label><br />
    <input id="Radio13" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio13">選択肢 3</label><br />
  </form>
  <br />
  <form name="form2" action="">
    <input id="Radio21" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
        <label for="Radio21">選択肢 1</label><br/>
    <input id="Radio22" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio22">選択肢 2</label><br />
    <input id="Radio23" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
      <label for="Radio23">選択肢 3</label><br />
  </form>
   <br />
  <form name="form00">
  <input type="submit" value="結果表示" onClick="JavaScript:searchDisp();">
  </form>
var a, b, c, sword;

function onRadioButtonChange() {
  check11 = document.form1.Radio11.checked;
  check12 = document.form1.Radio12.checked;
  check13 = document.form1.Radio13.checked;

  check21 = document.form2.Radio21.checked;
  check22 = document.form2.Radio22.checked;
  check23 = document.form2.Radio23.checked;

  if (check11 == true) {
    a = 1;
  } else if (check12 == true) {
    a = 2;
  } else if (check13 == true) {
    a = 3;
  }

  if (check21 == true) {
    b = 1;
  } else if (check22 == true) {
    b = 2;
  } else if (check23 == true) {
    b = 3;
  }

  var sword = a * 10 + b;
}

db = new Array;

db[11] = "データ11";
db[12] = "データ12";
db[13] = "データ13";
db[21] = "データ21";
db[22] = "データ22";
db[23] = "データ23";
db[31] = "データ31";
db[32] = "データ32";
db[33] = "データ33";

function searchDisp() {
  var swordLength = sword.length;
  if (swordLength < 2) { alert("選択されていない項目があります。"); exit; }

  document.write("<html><head><title>結果</title></head>");
  document.write("<body><div align='center'>");
    document.write("<a href='JavaScript:history.back()'>もどる</a><br><br>結果</div><hr>\n");
    document.write("<div align='center'><table border='1'>");

  for (var i = 11; i < 33; i++) {
    if (i == sword){
      document.write("<tr><td>");
      document.write(db[sword]);
      document.write("</td></tr><table></div></body></html>");
      break;
    }
  }
}

正直、自分のやりたいことがこのような形で実現できるのか分からないほどの初心者で申し訳ありません。
どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

ちょっとなにをやりたいかわかりませんが、
searchDisp() 内にあるvar swordLength = sword.length;について
グローバル変数のswordはvarで宣言されているだけですからlength
プロパティを持っているようには思えません。

なにをすると、どうしたいのかを書かれたほうが速いかもしれません

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/26 22:11

    ご回答いただきありがとうございます。
    質問内容が分かりにくく申し訳ありません。
    やりたいこととしてはシナリオシミュレーションのようなものをやりたいと思っており、
    いくつかある選択肢をラジオボタンで選択してもらうことで将来シナリオを選択してもらい、それに合うデータを配列から選び出して表示したいと考えております。
    具体的には一つの目の選択肢で選択肢1、二つ目の選択肢で選択肢2を選んだら、結果としてdb[12]の中身の”データ12”を表示するというようにしたいと考えております。
    var swordLength = sword.length;は選んでいない選択肢があった場合にarertを出したいと思い記述しました。
    よろしくお願いいたします。

    キャンセル

+2

提示されたソースから無駄な属性や要素を削除しています。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form action="">
            <div>
                <label>
                    <input type="radio" name="radio1" value="1" /> 選択肢1
                </label>
                <label>
                    <input type="radio" name="radio1" value="2" /> 選択肢2
                </label>
                <label>
                    <input type="radio" name="radio1" value="3" /> 選択肢3
                </label>
            </div>
            <div>
                <label>
                    <input type="radio" name="radio2" value="1" /> 選択肢1
                </label>
                <label>
                    <input type="radio" name="radio2" value="2" /> 選択肢2
                </label>
                <label>
                    <input type="radio" name="radio2" value="3" /> 選択肢3
                </label>
            </div>
            <p>
                <button type="button" id="check">結果</button>
            </p>

            <div id="response">

            </div>
        </form>
        <script type="text/javascript">
            var check = function () {
                var questions = [];
                var res = {};
                var radios = document.getElementsByTagName('input');
                for (var i = 0; i < radios.length; i++) {
                    if (-1 >= questions.indexOf(radios[i].name)) {
                        questions.push(radios[i].name);
                    }
                    if (radios[i].checked) {
                        res[radios[i].name] = radios[i].value;
                    }
                }
                for (var i = 0; i < questions.length; i++) {
                    var ans = document.createElement('p');
                    if (questions[i] in res) {
                        ans.innerHTML = questions[i] + ':' + res[questions[i]];
                    }
                    document.getElementById('response').appendChild(ans);
                }
            };
            document.getElementById('check').addEventListener('click', check);
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/26 22:19

    ご回答いただきありがとうございます。
    選んだ選択肢それぞれではなくdbの中に入っているデータを出力できればと考えております。
    一つ目を選択肢1、二つ目を選択肢2としたときにdb[12]の中にある"データ12”を結果として出力するということは可能でしょうか。
    よろしくお願いいたします。

    キャンセル

  • 2016/10/26 22:29

    話が漠然としすぎています。「できますか」と聞かれても、「判断材料がなくて、できるともできないとも言えません。」

    キャンセル

  • 2016/10/27 20:54

    再度ご回答いただきありがとうございます。
    質問が分かりにくく申し訳ありません。
    色々といじっていたらFirefoxとIEでは自分の表示したいものの最低限は表示できるようになりました。
    ありがとうございました。

    キャンセル

checkベストアンサー

+1

// var a, b, c, sword;
// ↓
   var a, b, c, sword = 0;
// var swordLength = sword.length;
// if (swordLength < 2) { alert("選択されていない項目があります。"); exit; }
// ↓
   var swordLength = sword;
   if (swordLength < 2) { alert("選択されていない項目があります。"); return; }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/26 22:15

    ご回答いただきありがとうございます。
    お陰様でエラーは表示されなくなりましたが、やはり結果は表示されないようです。
    どのようにすれば選択の結果を受けて配列からデータを取り出すことができるでしょうか。
    一つ目で選択肢1、二つ目で選択肢2を選んだ場合にdb[12]の”データ12"が表示できるようにしたいと考えております。
    よろしくお願いいたします。

    キャンセル

  • 2016/10/26 23:28

    searchDisp関数は最後でreturn false;をしないとフォームをポストしてしまいます。というかJSで結果を書き換えるだけならフォームに囲わずbutton要素とか使ってください。

    あと
    var sword = a * 10 + b;

    sword = a * 10 + b;

    document.writeで <HTML>とかは出力するものではないので、何か最近の入門書などを買ってdocument.innerHTML とかにしてください。

    キャンセル

  • 2016/10/27 20:57

    再度ご回答いただきありがとうございます。
    searchDisp関数ではそうしないとダメなんですね。勉強になります。
    長くなってしまい申し訳ありませんが、下記のようにしましたらFirefoxとIEでは表示したい結果になりました。
    chromeではやはり同じようにフォームがポストされる結果となります。
    ただdocument.innerHTMLにするとFirefoxでもIEでもうまくいかず、また選択されていないものがあってもalertが出ずにundefinedという結果が表示されるという状態なので、もう少し色々と調べていじってみます。
    ご教示いただきありがとうございました。

    var a, b, c, sword;

    function onRadioButtonChange() {
    check11 = document.form1.Radio11.checked;
    check12 = document.form1.Radio12.checked;
    check13 = document.form1.Radio13.checked;

    check21 = document.form2.Radio21.checked;
    check22 = document.form2.Radio22.checked;
    check23 = document.form2.Radio23.checked;

    if (check11 == true) {
    a = 1;
    } else if (check12 == true) {
    a = 2;
    } else if (check13 == true) {
    a = 3;
    }

    if (check21 == true) {
    b = 1;
    } else if (check22 == true) {
    b = 2;
    } else if (check23 == true) {
    b = 3;
    }

    sword = a * 10 + b;
    }

    db = new Array;

    db[11] = "データ11";
    db[12] = "データ12";
    db[13] = "データ13";
    db[21] = "データ21";
    db[22] = "データ22";
    db[23] = "データ23";
    db[31] = "データ31";
    db[32] = "データ32";
    db[33] = "データ33";

    function searchDisp() {
    var swordLength = sword;
    if (swordLength < 2) { alert("選択されていない項目があります。"); return false; }

    document.write("<html><head><title>結果</title></head>");
    document.write("<body><div align='center'>");
    document.write("<a href='JavaScript:history.back()'>もどる</a><br><br>結果</div><hr>\n");
    document.write("<p align='center'>");

    for (var i = 11; i < 33; i++) {
    if (db[i] == db[sword]){
    document.write(db[sword]);
    document.write("</p></body></html>");
    break;
    }
    }
    }

    キャンセル

  • 2016/10/28 19:10

    前回のコメントを参照ください。

    キャンセル

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

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