JS尝试添加新的输入框和按钮

时间：2017-11-03 00:50:39

标签： javascript html css

我正在尝试做以下事情：

  • 添加项目后，在关闭按钮左侧添加一个按钮
  • 在添加项目后删除每个新项目左侧的项目符号
  • 在添加项目框
    • 下方放置第二个输入框

我很肯定大部分来自javascript文件。 不幸的是，我不知道足够的JS来做到这一点。如果可以的话请帮忙。 

/* Include the padding and border in an element's total width and height */
* {
    box-sizing: border-box;
}

body{
    background: #fff1d9;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.logo{
    right: 90%;
}
/* Remove margins and padding from the list */
ul {
    margin: 0;
    padding: 0;
}

/* Style the list items */
ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    transition: 0.2s;

    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
    background: rgba(235, 110, 128, 0.6);
}

/* Darker background-color on hover */
ul li:hover {
    background: #eb6e80;
}

/* When clicked on, add a background color and strike out text */
ul li.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul li.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

/* Style the close button */
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.close:hover {
    background-color: #eb6e80;
    color: black;
}

/* Style the header */
.header1 {
    background-color: rgba(0, 143, 149, 0.76);
    padding: 30px 40px;
    color: white;
    text-align: center;
}

.header2 {
    background-color: rgba(233, 176, 0, 0.85);
    padding: 30px 40px;
    color: white;
    text-align: center;
}

.header3 {
    background-color: rgba(226, 78, 66, 0.76);
    padding: 30px 40px;
    color: white;
    text-align: center;
}


/* Clear floats after the header */
.header1:after, .header2:after, .header3:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the input */
input {
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
    padding: 10px;
    width: 75%;
    background: rgb(254, 166, 128);
    color: #fff1d9;
    float: left;
    text-align: center;
    font-size: 16px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

.addBtn:hover {
    background-color: rgb(228, 148, 122);
}

/********* USER PROFILE ********/

#myInput {
    border-box: box-sizing;

    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    padding: 14px 20px 12px 45px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(254, 166, 128, 0.68);
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65)
}

.show {display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Grocery List</title>
    <script src="https://use.fontawesome.com/780b259326.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script  type='text/javascript' src='script.js'></script>
</head>
<body>     

    <div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div>

    <div class="row">
        <div class="column">
            <div id="myDIV1" class="header1">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2>
                <input type="text" id="myInput1" placeholder="Item...">
                <span onclick="newElement1()" class="addBtn">Add</span>
            </div>
            <ul id="myUL1">
                <li>
                    hello
                    <span class="close"></span>
                </li>
            </ul>
        </div>
        <div class="column">
            <div id="myDIV2" class="header2">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2>
                <input type="text" id="myInput2" placeholder="Item...">
                <span onclick="newElement2()" class="addBtn">Add</span>
            </div>

            <ul id="myUL2"></ul>
        </div>
        <div class="column">
            <div id="myDIV3" class="header1">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2>
                <input type="text" id="myInput3" placeholder="Item...">
                <span onclick="newElement3()" class="addBtn">Add</span>
            </div>

            <ul id="myUL3"></ul>
        </div>
        <div class="column">
            <div id="myDIV4" class="header3">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2>
                <input type="text" id="myInput4" placeholder="Item...">
                <span onclick="newElement4()" class="addBtn">Add</span>
            </div>

            <ul id="myUL4"></ul>
        </div>
    </div>
</body>
</html>

＆＃13;
＆＃13; 
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
    }
}


// Create a new list item when clicking on the "Add" button
function newElement1() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput1").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL1").appendChild(li);
    }
    document.getElementById("myInput1").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement2() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput2").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL2").appendChild(li);
    }
    document.getElementById("myInput2").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement3() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput3").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL3").appendChild(li);
    }
    document.getElementById("myInput3").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement4() {
    var li = document.createElement("li");
    var inputValue = document.getElementById("myInput4").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL4").appendChild(li);
    }
    document.getElementById("myInput4").value = "";

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

你走了。在html，javascript以及CSS中进行了多项更改。浏览代码以便更好地理解。我把造型部分留给你去做。

＆＃13;
＆＃13; 
   
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    myNodelist[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
        var div = this.parentElement;
        div.style.display = "none";
    }
}


// Create a new list item when clicking on the "Add" button
function newElement1() {
    var li = document.createElement("div");
    var inputValue = document.getElementById("myInput1").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL1").appendChild(li);
    }
    document.getElementById("myInput1").value = "";

// here is the button logic
    var btn = document.createElement("button");
    var txt = document.createTextNode("button");
    btn.appendChild(txt);
    li.appendChild(btn);

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement2() {
    var li = document.createElement("div");
    var inputValue = document.getElementById("myInput2").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL2").appendChild(li);
    }
    document.getElementById("myInput2").value = "";

// here is the button logic
    var btn = document.createElement("button");
    var txt = document.createTextNode("button");
    btn.appendChild(txt);
    li.appendChild(btn);

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement3() {
    var li = document.createElement("div");
    var inputValue = document.getElementById("myInput3").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL3").appendChild(li);
    }
    document.getElementById("myInput3").value = "";

// here is the button logic
    var btn = document.createElement("button");
    var txt = document.createTextNode("button");
    btn.appendChild(txt);
    li.appendChild(btn);

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}

// Create a new list item when clicking on the "Add" button
function newElement4() {
    var li = document.createElement("div");
    var inputValue = document.getElementById("myInput4").value;
    var t = document.createTextNode(inputValue);
    li.appendChild(t);
    if (inputValue === '') {
        alert("You must write something!");
    } else {
        document.getElementById("myUL4").appendChild(li);
    }
    document.getElementById("myInput4").value = "";

// here is the button logic
    var btn = document.createElement("button");
    var txt = document.createTextNode("button");
    btn.appendChild(txt);
    li.appendChild(btn);

    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);

    for (i = 0; i < close.length; i++) {
        close[i].onclick = function() {
            var div = this.parentElement;
            div.style.display = "none";
        }
    }
}
＆＃13; 
<style>
/* Include the padding and border in an element's total width and height */
* {
    box-sizing: border-box;
}

body{
    background: #fff1d9;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
.logo{
    right: 90%;
}
/* Remove margins and padding from the list */
ul {
    margin: 0;
    padding: 0;
}

/* Style the list items */
ul li {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    transition: 0.2s;

    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
ul > div {
    cursor: pointer;
    position: relative;
    padding: 12px 8px 12px 40px;
    background: #eee;
    font-size: 18px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    transition: 0.2s;

    /* make the list items unselectable */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Set all odd list items to a different color (zebra-stripes) */
ul div:nth-child(odd) {
    background: rgba(235, 110, 128, 0.6);
}

/* Darker background-color on hover */
ul div:hover {
    background: #eb6e80;
}

/* When clicked on, add a background color and strike out text */
ul div.checked {
    background: #888;
    color: #fff;
    text-decoration: line-through;
}

/* Add a "checked" mark when clicked on */
ul div.checked::before {
    content: '';
    position: absolute;
    border-color: #fff;
    border-style: solid;
    border-width: 0 2px 2px 0;
    top: 10px;
    left: 16px;
    transform: rotate(45deg);
    height: 15px;
    width: 7px;
}

/* Style the close button */
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 12px 16px;
}

.close:hover {
    background-color: #eb6e80;
    color: black;
}

/* Style the header */
.header1 {
    background-color: rgba(0, 143, 149, 0.76);
    padding: 30px 40px;
    color: white;
    text-align: center;
}

.header2 {
    background-color: rgba(233, 176, 0, 0.85);
    padding: 30px 40px;
    color: white;
    text-align: center;
}

.header3 {
    background-color: rgba(226, 78, 66, 0.76);
    padding: 30px 40px;
    color: white;
    text-align: center;
}


/* Clear floats after the header */
.header1:after, .header2:after, .header3:after {
    content: "";
    display: table;
    clear: both;
}

/* Style the input */
input {
    border: none;
    width: 75%;
    padding: 10px;
    float: left;
    font-size: 16px;
}

/* Style the "Add" button */
.addBtn {
    padding: 10px;
    width: 75%;
    background: rgb(254, 166, 128);
    color: #fff1d9;
    float: left;
    text-align: center;
    font-size: 16px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

.addBtn:hover {
    background-color: rgb(228, 148, 122);
}

/********* USER PROFILE ********/

#myInput {
    border-box: box-sizing;

    background-position: 14px 12px;
    background-repeat: no-repeat;
    font-size: 16px;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
    padding: 14px 20px 12px 45px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: rgba(254, 166, 128, 0.68);
    min-width: 230px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: "Avenir W01", "futura", "Lucida grande", sans-serif;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: rgba(235, 110, 128, 0.65)
}

.show {display:block;}
</style>
＆＃13; 
<html>
<head>
    <title>Grocery List</title>
    <script src="https://use.fontawesome.com/780b259326.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script  type='text/javascript' src='script.js'></script>
</head>
<body>     

    <div><center style="font-size: 90px; color:#fea680; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;"><b>Shopping List</b></center></div>

    <div class="row">
        <div class="column">
            <div id="myDIV1" class="header1">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Amir's List</h2>
                <input type="text" id="myInput1" placeholder="Item...">
                <input type="text" placeholder="2nd text box">
                <span onclick="newElement1()" class="addBtn">Add</span>
            </div>
            <ul id="myUL1">
            </ul>
        </div>
        <div class="column">
            <div id="myDIV2" class="header2">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Sush's List</h2>
                <input type="text" id="myInput2" placeholder="Item...">
                <input type="text" placeholder="2nd text box">
                <span onclick="newElement2()" class="addBtn">Add</span>
            </div>

            <ul id="myUL2"></ul>
        </div>
        <div class="column">
            <div id="myDIV3" class="header1">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">Daniel's List</h2>
                <input type="text" id="myInput3" placeholder="Item...">
                <input type="text" placeholder="2nd text box">
                <span onclick="newElement3()" class="addBtn">Add</span>
            </div>

            <ul id="myUL3"></ul>
        </div>
        <div class="column">
            <div id="myDIV4" class="header3">
                <h2 style="font-size: 250%; color:#fff1d9; font-family:Avenir W01, futura, Lucida grande, sans-serif !important;">House List</h2>
                <input type="text" id="myInput4" placeholder="Item...">
                <input type="text" placeholder="2nd text box">
                <span onclick="newElement4()" class="addBtn">Add</span>
            </div>

            <ul id="myUL4"></ul>
        </div>
    </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题