28421

[code]

    data = [
    {"number":"4","shot":"3P","result":"成功"},
            {"number":"5","shot":"2P","result":"失敗"},
            ...,
             {"number":"8","shot":"3P","result":"成功"}
    ]
    
[/code]

上記のようなオブジェクトの配列をボタンクリックで自動的につくりたいです。  
バスケットボールの試合を見ながらで、例えばオブジェクトの1つ目だと、背番号4番の選手が3ポイントシュートを成功させたという情報を瞬時にボタンクリックで表示させたいと思ってます。  
現在、「４，５，６，７，８」の背番号のボタン５つと「３P、２P」のシュートの種類のボタン２つと「成功、失敗」のシュートの結果のボタン２つを用意していています。  
それで自分なりに

[code]

    $(function() {
            $("#botan4").click(function(){
                num = "4";});
        });
        $(function() {
            $("#botan5").click(function(){
                num = "5;});
        });
    ...
        $(function() {
            $("#botansippai").click(function(){
                res = "失敗";});
        });
    
[/code]

のような関数を用意して1つ目だったら４のボタンをクリックしたらnumに４という文字が入るようにしたらいいんじゃないかと考えてこのようなボタンを背番号、シュート、結果の9個作りました。そして

[code]

    data=[{"number":"num","shot":"sh","result":"res"}]
    
[/code]

上記のようにdataを作ってみましたが、オブジェクトの配列はもちろん1つしかできませんでした。どなたか作り方教えてください。


CC BY-SA 3.0
2016-08-21T23:52:41.083
28419
2016-08-22T13:51:57.223
2016-08-22T00:31:16.000
15185
18545
question
javascript
javascriptを勉強しています。ボタンクリックをして下記のようなオブジェクトの配列を作れるようにしたいのですがどうしたらいいでしょうか？


イベントの処理等を見直すといいかもしれませんが、今の構成で対応するのであれば次のような関数を用意してはいかがでしょうか。

[code]

    var data = []; 
    //配列操作用関数  
    function registerData(name, val){
         //操作対象のデータは配列の末尾
         var record = data[data.length - 1];
    
         if(record[name] != undefined){
           //操作しようとするデータに、すでに値が含まれていたら、新しいデータを配列に追加
           record = {};
           data[data.length] = record;
         }
         //値を登録
         record[name] = val;
        }
    //上記の関数を使う側
    $(function() {
      $("#botan4").click(function(){registerData("num","4");});});
    
[/code]

* * *

私もバスケやるので、よいプログラムが出来上がることを祈ってます


CC BY-SA 3.0
2016-08-22T00:09:44.400
28420
2016-08-22T00:09:44.400
12233
28419
answer


全てをボタンクリックイベントで行う必要がなければ、  
成功 / 失敗 のボタンがクリックされた際に、画面上の項目の選択状態を判断して  
オブジェクトを作成するほうが簡単に出来る気がしますよ!

以下にスニペットを作成してみましたので、ご覧になってみてください!  

[code]

    var data = [];
    $(function(){
      $(".result").click(function(){
        var number = $("[name=number]:checked").val(); // 選手
        var shot   = $("[name=shot]:checked").val();   // 点数
        var result = $(this).val();                    // 成功 or 失敗
    
        data.push({"number": number, "shot" : shot, "result": result});
        console.log(data);
    
        reset();
      });
    
      function reset() {
        // 初期状態に戻す
        $("[name=number]:eq(0)").prop('checked', true);
        $("[name=shot]:eq(0)").prop('checked', true);
      }
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <input type="radio" name="number" value="0" checked="checked">指定なし
    <input type="radio" name="number" value="1">選手1
    <input type="radio" name="number" value="2">選手2
    <input type="radio" name="number" value="3">選手3
    <input type="radio" name="number" value="4">選手4
    <input type="radio" name="number" value="5">選手5
    <hr>
    
    <input type="radio" name="shot" value="2" checked="checked">2P
    <input type="radio" name="shot" value="3">3P
    <hr>
    
    <input type="button" class="result" value="成功">
    <input type="button" class="result" value="失敗">
[/code]


CC BY-SA 3.0
2016-08-22T00:50:02.877
28421
2016-08-22T13:51:57.223
2016-08-22T13:51:57.223
12256
12256
28419
answer