Question

单击+按钮时我必须添加新元素，元素应从div转到无序列表。每当我点击+按钮时，元素就会转到我创建的最后一个div。我知道我的错误是ul中的javascript是一个数组但是我不知道如何解决这个问题。我想我必须使用this关键词但不知道怎么做。有经验的人可以给我一些建议吗？

＆＃13;

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 = '';
    }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

HTML code

JavaScript code

CSS code

Answer 1

更改+按钮的html代码，如下所示

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

使用data-index，您将设置要更改的列表的索引，并将event对象传递给函数createElement。比如下更新您的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/

Answer 2

您正在使用它来查找页面中的所有UL：

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

然后你拿最后一个( ul[ul.length-1].appendChild(elem);) 你需要根据点击的按钮找到UL。

这样做的方法是给每个UL一个唯一的id或类，并将其传递给createElement()函数，该函数在该id或类上找到UL基础

Answer 3

当您要寻找特定的<ul>时，您将获得所有 <input class='rightInputs' type='button' value='+' onclick="section.createElement('forShopping')"/>。

获得特定方法的最佳方法是给它一个标签并明确引用它。

将通话更改为：

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);
}

然后你可以更新你的javascript。

onclick=""

值得注意的是，使用像// html <input class="rightInputs" id="addToShopping" type="button" value='+' /> // in the javascript document.getElementById('addToShopping').addEventListener('click', function() { section.createElement('forShopping'); });这样的东西会有问题。最好给它一个ID并在Javascript中附加一个事件处理程序。

=IF(AND(B2=C2,C2<>""),TRUE)

获得正确的ul

3 个答案: