Question

我有一个在此列表中生成的按钮。我想将按钮设置为引导按钮。我该怎么做呢？我在下面发布了我的javascript。（这不能用HTML完成，因为按钮是在另一个JS方法执行后生成的。）我还想让JS方法可以重用（我不需要做4个方法来做同样的事情。）如果有人能帮助我，那就太棒了!!

＆＃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 inputValueB = document.getElementById("myInput1B").value;

  var t = document.createTextNode(inputValue);
  var space = document.createTextNode("             ");
  var tB = document.createTextNode(inputValueB);

  li.appendChild(tB);
  li.appendChild(space);
  li.appendChild(t);

  if (inputValue === '') {
    alert("You must input an item!");
  } else {
    document.getElementById("myUL1").appendChild(li);
  }
  document.getElementById("myInput1").value = "";
  document.getElementById("myInput1B").value = ""

  // here is the button logic
  var btn = document.createElement("button");

  var txt = document.createTextNode("Bought");
  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;

/* 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: rgba(0, 143, 149, 0.6);
  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: rgba(0, 143, 149, 0.59);
  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;
}


/* Style the close button */

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 12px 16px 12px 16px;
}

.close:hover {
  background-color: rgba(233, 176, 0, 0.85);
  color: black;
  padding: 12px 16px 12px 16px;
}


/* 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;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

＆＃13;

<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" id="myInput1B" placeholder="Brand/Quantity...">
      <span onclick="newElement1()" class="addBtn">Add</span>
    </div>
    <ul id="myUL1">
    </ul>
  </div>
</div>

＆＃13;

Answer 1

要使函数通用，您可以执行以下操作：

function newElement(myInput, myInputB, myUL) {
                var li = document.createElement("div");
                var inputValue = document.getElementById(myInput).value;
                var inputValueB = document.getElementById(myInputB).value;

                var t = document.createTextNode(inputValue);
                var space = document.createTextNode("             ");
                var tB = document.createTextNode(inputValueB);

                li.appendChild(tB);
                li.appendChild(space);
                li.appendChild(t);

                if (inputValue === '') {
                    alert("You must input an item!");
                } else {
                    document.getElementById(myUL).appendChild(li);
                }
                document.getElementById(myInput).value = "";
                document.getElementById(myInputB).value = ""


                // here is the button logic
                var btn = document.createElement("button");
                // When the user clicks the button, open the modal
                btn.onclick = function () {
                    modal.style.display = "block";
                }
                var txt = document.createTextNode("Bought");
                btn.classList.add('btn');
                btn.classList.add('btn-primary');
                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";
                    }
                }
            }

另外，我向您的classList.add()添加了2 btn，为您提供了Bootstrap按钮

然后拨打电话点击：

   <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" id="myInput1B" placeholder="Brand/Quantity...">
                    <span onclick="newElement('myInput1', 'myInput1B', 'myUL1')" class="addBtn">Add</span>
                </div>
                <ul id="myUL1">
                </ul>
            </div>

将onclick="newElement()"中的变量更改为相应的变量名称。

Answer 2

在JS中创建按钮时，在按钮中添加引导类。那应该做的工作。

在javascript中设置按钮样式

2 个答案: