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

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

ただいまの
回答率

88.63%

HTMLのリストにjavascriptで追加したいんですが、わかりません。

解決済

回答 1

投稿

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

asahinon

score 6

イメージ説明

動き
・オレンジプラス
→学校の中にある1限や3限などの項目を追加することができる。
→オレンジプラスボタンを押すとテキストボックス、カラーピッカー、追加ボタンの3つを表示・非表示できる。(デフォルトは非表示状態)

・ピンクプラス
→学校やプライベートなどの黒丸の項目を追加することができる。

したいこと
・ピンクプラスで追加ボタンを押した際にオレンジプラスボタンも一緒に追加されるようにしたい。

    <script type="text/javascript" src="list.js"></script>
            <!--リストの作成-->
            <ul>
                <li>
                    <label contentEditable="true">学校<input type="checkbox" onchange="clickBtn2(this.checked)" style="display: none;" checked></label>
                    <div id="school">
                    <ul id="FavList"></ul>
                        <input type="text" id="favtext" style="display:none;">
                        <input type="color" id="choicecolor" style="display:none;">
                        <input type="button" id="addurl" value="追加" onclick="bar();" style="display:none;">
                    <label>
                            <img src="プラスオレンジ.png">
                            <input type="checkbox" style="display: none;" onchange="clickBtn1(this.checked)">
                    </label>
                    </div>
                </li>
            </ul>

    <ul id="pinkList"></ul>
            <ul>
                    <input type="text" id="plustext" style="display:none;">
                    <input type="button" id="oookkk" value="追加" onclick="bar2();" style="display:none;">
                    <label>
                        <img src="プラスピンク.png">
                        <input type="checkbox" style="display: none;" onchange="clickBtn3(this.checked)">
                    </label>
            </ul>

        </div>
//↓リストの追加オレンジ
function bar() {
    // a 要素の作成と属性の指定
    var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("favtext").value );
    newAnchor.appendChild( newTxt );

    // li 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );
    newLi.style.color = document.getElementById('choicecolor').value;    //色適応
    document.getElementById('FavList').contentEditable = true;    //リストの編集

    // リストに追加
    var list = document.getElementById("FavList");
    list.appendChild( newLi );   
}

//↓オレンジボタン表示非表示
//初期表示は非表示
function clickBtn1(){
    const favtext = document.getElementById("favtext");
    const addurl = document.getElementById("addurl");
    const choicecolor = document.getElementById("choicecolor");

    if(favtext.style.display=="block"){
        // noneで非表示
        favtext.style.display ="none";
    }else{
        // blockで表示
        favtext.style.display ="block";
    }

    if(addurl.style.display=="block"){
        // noneで非表示
        addurl.style.display ="none";
    }else{
        // blockで表示
        addurl.style.display ="block";
    }

    if(choicecolor.style.display=="block"){
        // noneで非表示
        choicecolor.style.display ="none";
    }else{
        // blockで表示
        choicecolor.style.display ="block";
    }
}


//↓親要素表示非表示
function clickBtn2(){
    const school = document.getElementById("school");

    if(school.style.display=="block"){
        // noneで非表示
        school.style.display ="none";
    }else{
        // blockで表示
        school.style.display ="block";
    }
}

//↓ピンクボタン表示非表示
//初期表示は非表示
function clickBtn3(){
    const plustext = document.getElementById("plustext");
    const oookkk = document.getElementById("oookkk");

    if(plustext.style.display=="block"){
        // noneで非表示
        plustext.style.display ="none";
    }else{
        // blockで表示
        plustext.style.display ="block";
    }

    if(oookkk.style.display=="block"){
        // noneで非表示
        oookkk.style.display ="none";
    }else{
        // blockで表示
        oookkk.style.display ="block";
    }
}

//↓リストの追加ピンク
function bar2() {
    // a 要素の作成と属性の指定
     var newAnchor = document.createElement("a");
    var newTxt = document.createTextNode( document.getElementById("plustext").value );
    newAnchor.appendChild( newTxt );

    // ul 要素の作成
    var newLi = document.createElement("li");
    newLi.appendChild ( newAnchor );

    // リストに追加
    var list = document.getElementById("pinkList");
    list.appendChild( newLi );   
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • azuapricot

    2019/12/16 11:56

    「ピンクプラスで追加ボタンを押した際にオレンジプラスボタンも一緒に追加されるようにしたい。」
    これの仰ってる意味が良く分かりません。
    一緒に何を追加したいんですか?
    テキストボックスの内容ですか?

    キャンセル

  • asahinon

    2019/12/16 12:20

    ピンクプラスの追加ボタンでは黒丸の項目しか増やすことができないので、学校部分にある1限、3限などの入力した項目を増やせるようにオレンジプラスボタン(テキストボックス、カラーピッカー、追加ボタンの3つデフォルトである非表示の状態)を黒丸の項目と一緒に追加できるようにしたいです。わかりづらくてすみません…

    キャンセル

  • azuapricot

    2019/12/16 13:08

    「オレンジ+ボタンを黒丸の項目と一緒に追加できるようにしたい」
    やっぱり仰ってる意味がよくわからないのですが、やりたいことを図示していただけませんか?

    回答が得られないということは質問内容が悪くて回答者が理解できずに諦めていることがほとんどです。

    キャンセル

  • azuapricot

    2019/12/16 13:11

    ピンク側の追加ボタンに機能を追加したいということですか?

    ピンク側の追加ボタン押下

    ピンク側のテキストボックスの入力内容を下部リストに反映

    オレンジ側のテキストボックスの入力内容があれば上部リストに反映

    こういうことでしょうか?

    キャンセル

回答 1

checkベストアンサー

+2

まず念頭においてほしいのが id は重複できないということです。何度も追加するものには id を使わず class にしておきます。
要素自体は作れると思うので省略しますが、増えてくると面倒になるので template 要素を使ったほうがいいでしょう。IE も対応しなければならないなら非表示の要素を使うとかしてください。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

    var newLi = document.getElementById('newlist').content.cloneNode(true).querySelector('*');
    newLi.querySelector('label').insertAdjacentText('afterbegin', document.getElementById('plustext').value);
    newLi.querySelector('[name="orange"]').addEventListener('click', clickBtn1, false);
    newLi.querySelector('.addurl').addEventListener('click', bar, false);
    list.appendChild(newLi);

イベント処理も id ではなく、イベントオブジェクトから要素をたどるようにします。

function clickBtn1(event) {
    const li = event.target.closest('li'); // not IE
/*
    const favtext = document.getElementById("favtext");
    const addurl = document.getElementById("addurl");
    const choicecolor = document.getElementById("choicecolor");
*/
    const favtext = li.querySelector(".favtext");
    const addurl = li.querySelector(".addurl");
    const choicecolor = li.querySelector(".choicecolor");


https://developer.mozilla.org/ja/docs/Web/API/Event/target

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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