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

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

ただいまの
回答率

88.60%

簡単なメモ張(自作の初心者向けのプログラミング辞書)を作成していますが、自分で入力したものの出力がわかりません。

受付中

回答 0

投稿

  • 評価
  • クリップ 2
  • VIEW 603

tkfmmyst

score 7

(やりたいこと)
・メモ張をつくっています。
・自分で(タイトル)と(内容)を入力。その後、生成されたボタンを押したら出力部分に内容が表示
※ファイルは3つ目まではあらかじめ配列を置いてます。4つ目からが自分で追加する部分です。

→つまり(関数)(配列)(オブジェクト)までは配列を置いています。

(わからないこと)
入力部分に(タイトル)(内容)の情報をいれたあと、生成されるボタンを押したら出力され、それがどんどん追加されるようにしたい。

jQuery(function () {
    // ↓ここから記述

    // 【 配列の定義】
    // 
    var list=[
        '関数とは',
        '配列とは・・・',
        'オブジェクトとは・・・',

    ]

    var list2=[
        '関数',
        '配列',
        'オブジェクト'
    ]

    console.log(list[0]);
    console.log(list);
    console.log(list.length);

    console.log(list2[2]);

    // ここから出力欄(上段)

    $('#select1').on('click',function(){
       $('#text_area').html(list[0]);
    });

    $('#select2').on('click',function(){
        $('#text_area').html(list[1]);
     });

     $('#select3').on('click',function(){
        $('#text_area').html(list[2]);
     });



     $('#aaa').on('click',function(){
        $('#text_area').html(list[3]);
     });



     $('#select4').on('click',function(){
        $('#text_area').html(list[3]);
     });

     $('#select5').on('click',function(){
        $('#text_area').html(list[4]);
     });

     $('#select6').on('click',function(){
        $('#text_area').html(list[5]);
     });

     $('#select7').on('click',function(){
        $('#text_area').html(list[6]);
     });

     $('#select8').on('click',function(){
        $('#text_area').html(list[7]);
     });

    //【クリアボタンの設置】

    $('#clear').on('click',function(){
        $('#text_area').val('');
    });

    //入力ボタン
    $('#input').on('click',function(){    
        //1.ボタンの追加
    $('#select').append('<button id="'  + $('#title').val() +  '">' + $('#title').val() + '</button>');
        //2.各種定義
        var code =$('#text_area2').val();

        //3.配列への追加&Localstorageへの追加
        list.push(code);
        localStorage.setItem('name',list);
        console.log(list);

        var input_title = $('#title').val();
        list2.push(input_title);

        localStorage.setItem('title',list2);
        console.log(list2)

        //4.
});



    // //ここから入力欄(下段)※トライ中

    // $('#select4').on('click',function{
    //     //新規登録
    //     if(link[4] == 'undefined'){
    //         var code = $('#text_area2').val();
    //         list.push(code); //配列に追加
    //             // list.push(code);
    //         localStorage.setItem('name',list); //localstorageに追加
    //          console.log(list);
    //             // localStorage.setItem(code);

    //         //2タイトルの保存の処理
    //         var title = $('#title').val();
    //         list2.push(title); //title配列に追加

    //         localStorage.setItem('title',list2) //localstorageに追加
    //         console.log(list2)
    //         $('#select5').html(title);
    //     }else if(){
    //         //出力
    //         $('#text_area').html(list[4]);
    //     }else if(){

    //     }


    // });



        //コードの入力
    // $('#input').on('click',function(){
    //     //1コードの保存の処理
    //     var code = $('#text_area2').val();
    //     list.push(code);
    //         // list.push(code);
    //     localStorage.setItem('name',list);
    //      console.log(list);
    //         // localStorage.setItem(code);

    //     //2タイトルの保存の処理
    //     var title = $('#title').val();
    //     list2.push(title);

    //     localStorage.setItem('title',list2)
    //     console.log(list2)
    //     $('#select4').html(title);

    //     //完了の通知
    //     alert('保存しました');



    // });



    // ↑ここまでに記述
});
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>list</title>
</head>

<body>





<!-- ボタン部分 -->
<h2>検索(出力)</h2>
<div class="siraberu">
    <div id="select">
        <p>調べたい項目のボタンを押してください</p>
        <button name="q" id="select1">関数</button>
        <button name="q" id="select2">配列</button>
        <button name="q" id="select3">オブジェクト</button>
        <!-- <button name="q" id="select4">未登録</button>
        <button name="q" id="select5">未登録</button> -->
    </div>



    <input type="text" id="num">
    <button id="select">表示</button>

</div>
<!-- 入力部分 -->

<div class="gedan">

    <div class="nyuuryoku">
        <h2>追加登録(入力)</h2>
        <input type="text" id="title" placeholder='タイトルを入力してください'>
        <textarea name="" id="text_area2" cols="30" rows="10" placeholder='ここに登録したいコードを入力してください'></textarea>
        <button id="input">登録</button>
    </div>


    <div class="syutsuryoku">
        <h2>出力部分</h2>
        <textarea placeholder='ここに説明が表示されます' name="" id="text_area" cols="30" rows="10"></textarea>
        <div id="view">

            <button id="clear" class="clear">クリア</button>
        </div>
    </div>
</div>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/list.js"></script>
</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • m.ts10806

    2018/08/09 16:16

    見落としてました。失礼しました。コード内にありましたね。

    キャンセル

  • tkfmmyst

    2018/08/09 16:18

    ご連絡ありがとうございます。新しく生成したボタンのidを工夫したらいいものか・・、煮詰まっておりまして少しでもアドバイスいただけるとたすかります。。。

    キャンセル

  • ku__ra__ge

    2018/08/09 17:01

    質問で「わからないこと」として書かれているのは最終的になにがしたいかですね。具体的にそれを実現するためのどの部分がわからないのか、問題解決のためにどんな調査をしたかを書いて下さい。

    キャンセル

まだ回答がついていません

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

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

関連した質問

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

  • トップ
  • JavaScriptに関する質問
  • 簡単なメモ張(自作の初心者向けのプログラミング辞書)を作成していますが、自分で入力したものの出力がわかりません。