正しいulにする

+ボタンをクリックしたときに要素を追加する必要があり、その要素はdivから順不同のリストに移動する必要があります。私が+ボタンをクリックするたびに、要素が最後に移動しますdiv私は自分の間違いを知っていますul私のjavascriptはulの配列ですが、それを修正する方法はわかりません。 thisキーワードですが、それをどうやって得るのでしょうか。経験豊富な人が私に助言を与えることができますか？正しいulにする

let check = (function(){ 
 
    
 
    function isActive (elem) { 
 
     if(elem.checked == true){ 
 
      elem.parentNode.style.backgroundColor = 'forestGreen'; 
 
     }else{ 
 
      elem.parentNode.style.backgroundColor = 'white'; 
 
     } 
 
    } 
 
    
 
    return { 
 
     isActive: isActive 
 
    } 
 
    
 
})(); 
 
    
 
    
 
let section = (function(){ 
 
    
 
    function Section(){ 
 
     //create section div 
 
     let newDiv = document.createElement('div'); 
 
     newDiv.setAttribute('class', 'wrapper'); 
 
     let wrapper = document.getElementsByClassName('wrapper'); 
 
     let len = wrapper.length-1; 
 
     wrapper[len].parentNode.appendChild(newDiv); 
 
     
 
     //create div for list items 
 
     let innerDiv = document.createElement('div'); 
 
     innerDiv.setAttribute('id', 'business'); 
 
     newDiv.appendChild(innerDiv); 
 
     
 
     //create title 
 
     let title = document.createElement('h3'); 
 
     let txtTitle = document.getElementById('title').value; 
 
     let createTitle = document.createTextNode(txtTitle); 
 
     title.appendChild(createTitle); 
 
     title.setAttribute('tag','h3'); 
 
     innerDiv.appendChild(title); 
 
     
 
     //create new Unordered List 
 
     let newUl = document.createElement('ul'); 
 
     newUl.setAttribute('tag', 'ul'); 
 
     innerDiv.appendChild(newUl); 
 
     
 
     //create add button 
 
     let btn = document.createElement('input'); 
 
     btn.setAttribute('type', 'button'); 
 
     btn.setAttribute('value', '+'); 
 
     btn.setAttribute('class', 'rightInputs'); 
 
     newDiv.appendChild(btn); 
 
     btn.setAttribute('onclick', 'section.createElement()'); 
 
     
 
     //create field for the elements 
 
     let txtField = document.createElement('input'); 
 
     txtField.setAttribute('value', 'Add item...'); 
 
     txtField.setAttribute('type', 'text'); 
 
     txtField.setAttribute('class', 'rightInputs'); 
 
     txtField.setAttribute('onMouseOver', 'clearContent(this)'); 
 
     newDiv.appendChild(txtField); 
 
    } 
 
    
 
    function createElement(){ 
 
     //create LI 
 
     let elem = document.createElement('li'); 
 
     let inputs = document.getElementsByClassName('rightInputs'); 
 
     let lastInp = inputs[inputs.length-1].value; 
 
     let txtLi = document.createTextNode(lastInp); 
 
     let ul = document.getElementsByTagName('ul'); 
 
     //create checkbox 
 
     let chBox = document.createElement('input'); 
 
     chBox.setAttribute('type', 'checkbox'); 
 
     chBox.setAttribute('onclick', 'check.isActive(this)'); 
 
     //------------ 
 
     elem.setAttribute('tag', 'li'); 
 
     elem.appendChild(chBox); 
 
     elem.appendChild(txtLi); 
 
     ul[ul.length-1].appendChild(elem); 
 
    } 
 
    
 
    function addToDOM(){ 
 
     return new Section(); 
 
    } 
 
    
 
    return { 
 
     addToDOM: addToDOM, 
 
     createElement: createElement 
 
    } 
 
    
 
})(); 
 
    
 
function clearContent(elem){ 
 
    if(elem.value == 'Add item...' || elem.value == 'Title..'){ 
 
     elem.value = ''; 
 
    } 
 
}

#mainDiv { 
 
    width: 500px; 
 
    height: 600px; 
 
    border: 2px solid black; 
 
    margin: auto; 
 
} 
 
    
 
h1{ 
 
    text-align: center; 
 
} 
 
    
 
#title{ 
 
    width: 150px; 
 
    color: black; 
 
    margin-left: 20px; 
 
} 
 
    
 
#addSection { 
 
    margin-left: 10px; 
 
} 
 
    
 
#container { 
 
    overflow: auto; 
 
    width: 450px; 
 
    height: 450px; 
 
    border: 5px double gray; 
 
    margin-bottom: 20px; 
 
    margin-left: 20px; 
 
} 
 
    
 
#shoppingList { 
 
    overflow: auto; 
 
    width: 375px; 
 
    height: 165px; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    margin-top: 20px; 
 
} 
 
    
 
#business { 
 
    overflow: auto; 
 
    width: 375px; 
 
    height: 165px; 
 
    border: 1px solid black; 
 
    margin: auto; 
 
    margin-top: 20px; 
 
} 
 
    
 
ul { 
 
    margin-top: 5px; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    list-style: none; 
 
} 
 
    
 
li { 
 
    border-bottom: 1px solid black; 
 
    width: 100%; 
 
} 
 
    
 
input { 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
    
 
.rightInputs { 
 
    float: right; 
 
    margin-right: 20px; 
 
} 
 
    
 
h3 { 
 
    text-align: right; 
 
    margin: 10px 10px 0px 0px; 
 
} 
 
    
 
.wrapper { 
 
    width: 400px; 
 
    height: 250px; 
 
    margin: auto; 
 
}

<div id='mainDiv'> 
 
     <h1> Tuesday <em>TODO</em> List </h1> 
 
     <div id='container'> 
 
       <div class='wrapper'> 
 
        <div id='shoppingList'> 
 
         <h3> Shopping List </h3> 
 
         <ul id='forShopping'> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Air-freshener</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Pampers</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Newspapper</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Toilet paper</input></li> 
 
         </ul> 
 
        </div> 
 
        <input class='rightInputs' type='button' value='+' onclick='section.createElement()'/> 
 
        <input class='rightInputs' type='text' value='Add item...' 
 
          onMouseOver='clearContent(this)'/> 
 
       </div> 
 
       <div class='wrapper'> 
 
        <div id='business'> 
 
         <h3> Business List </h3> 
 
         <ul id='forBusiness'> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Inspect fiscal year report</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Lunch with board of directors</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Fire Jackson</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Take a nap</input></li> 
 
          <li><input type='checkbox' onclick='check.isActive(this)'> Arrange meeting with investors</input></li> 
 
         </ul> 
 
        </div> 
 
        <input class='rightInputs' type='button' value='+' onclick='section.createElement()'/> 
 
        <input class='rightInputs' type='text' value='Add item...' 
 
          onMouseOver='clearContent(this)'/> 
 
       </div> 
 
     </div> 
 
     <input id='title' type='text' value='Title..' onMouseOver='clearContent(this)'/> 
 
     <input id='addSection' type='button' value='New Section' onclick='section.addToDOM()'/> 
 
    </div>

2016-11-23 Тома Томов

外部ではなく、質問にコードを入力してください。 –

訂正に感謝します！ –

変更data-indexあなたが変更したいリストのインデックスを設定し、あなたが機能createElementにeventオブジェクトを渡すを使用して、この

<input class='rightInputs' type='button' value='+' data-index="0" onclick='section.createElement(event)'/>

のようなあなたの+ボタンのHTMLコード。このようなあなたのcreateElement機能アップデートより：

function createElement(e) { 
    //.. 
    ul[e.target.dataset.index].appendChild(elem); 
}

をあなたは右のリストをターゲットに、ボタンからプロパティdata-indexを使用します。

また新しいセクションを作成し、あなたのSection機能を更新し、新しいボタンにdata-index属性セット：

btn.setAttribute('data-index', document.getElementsByTagName('ul').length - 1);

をしてもclick属性更新：

btn.setAttribute('onclick', 'section.createElement(event)');

ここではフィドルhttps://jsfiddle.net/dm06a7db/を働いています

出典

2016-11-23 13:34:00 xxxmatko

ありがとうございます！ –

あなたの歓迎ですが、他人を助けるために正しい答えを記入することを忘れないでください。 – xxxmatko

あなたは、ページ内のすべてのULを見つけるために、これを使用している：

let ul = document.getElementsByTagName('ul');

次に、最後のものを取る(ul[ul.length-1].appendChild(elem);) クリックしたボタンに基づいてULを見つける必要があります。

あなたが探している必要がありますとき、これを行うような方法は、すべてのULに固有のIDやクラスを与え、それがそのIDまたはクラス

出典

2016-11-23 13:24:20

ありがとう！ –

あなたはすべての<ul>を得ているのULベースを見つけ、createElement()関数にそれを渡すことです特定のもののために。

特定のものを取得する最も良い方法は、ラベルを付けて明示的に参照することです。

変更への呼び出し：

<!-- Important, use double quotes for the onclick call --> 
<input class='rightInputs' type='button' value='+' onclick="section.createElement('forShopping')"/>

そして、あなたはあなたのJavaScriptを更新することができます。

function createElement(selector){ 
    //create LI 
    let elem = document.createElement('li'); 
    let inputs = document.getElementsByClassName('rightInputs'); 
    let lastInp = inputs[inputs.length-1].value; 
    let txtLi = document.createTextNode(lastInp); 
    //create checkbox 
    let chBox = document.createElement('input'); 
    chBox.setAttribute('type', 'checkbox'); 
    chBox.setAttribute('onclick', 'check.isActive(this)'); 
    //------------ 
    elem.setAttribute('tag', 'li'); 
    elem.appendChild(chBox); 
    elem.appendChild(txtLi); 

    document.getElementById(selector).appendChild(elem); 
}

onclick=""のようなものを使用すると問題があることにも注意してください。 IDを渡して、Javascriptでイベントハンドラをアタッチする方が良いでしょう。

// html 
<input class="rightInputs" id="addToShopping" type="button" value='+' /> 

// in the javascript 
document.getElementById('addToShopping').addEventListener('click', function() { 
    section.createElement('forShopping'); 
});

出典

2016-11-23 13:30:19

先生、ありがとう！ –

答えて

関連する問題