Кнопка копирования и вставки содержимого в HTML и JavaScript - PullRequest
Новая
       7

Кнопка копирования и вставки содержимого в HTML и JavaScript

0 голосов
/ 05 июня 2018

Я пытаюсь написать скрипт на веб-странице, который будет копировать и вставлять кнопку и скрытый контент, а затем добавлять внизу первой кнопки.Проблема в том, что я не очень грамотен в JS.

Таким образом, при нажатии кнопки «Добавить» кнопка «Тестовая кнопка № 1» будет скопирована и добавлена ​​внизу как «Тестовая кнопка № 2».Имейте в виду, что кнопка может содержать раскрывающийся список вида в реальном скрипте, этот был только сокращен, поэтому вторая кнопка должна содержать ту же информацию, что и первая.Любая помощь будет очень высоко ценится.

Пожалуйста, используйте мою попытку нижнего скрипта в качестве шаблона: 

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      margin: 0;
      min-width: 250px;
    }

    .testBtn {
      width: 100%;
      background-color: grey;
      color: white;
      border: none;
    }

    /* Style the header */
    .header {
      background-color: black;
      padding: 30px 40px;
      color: white;
      text-align: center;
    }

    /* Clear floats after the header */
    .header:after {
      content: "";
      display: table;
      clear: both;
      border: none;
    }


    /* Style the "Add" button */
    .addBtn {
      padding: 10px;
      width: 25%;
      background: #d9d9d9;
      color: #555;
      float: left;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }

    .addBtn:hover {
      background-color: #bbb;
    }
    </style>
    </head>
    <body>

    <div id="myDIV" class="header">
      <h2 style="margin:5px">Test Button List</h2>
      <span onclick="newElement()" class="addBtn">Add</span>
    </div>

    <div class="myUL" id="myUL">
      <button class="testBtn">Test Button #1</button>
    </div>

    <script>
    function newElement() {
      var li = document.createElement("button");
      var inputValue = document.getElementById("myUL").value;
      var t = document.createTextNode(inputValue);
      li.appendChild(t);
      if (inputValue === !"") {
        document.getElementById("myUL").appendChild(li);
      }
    }
    </script>

    </body>
    </html>
################# EDITED

Я попробовал узел.clone (), но все еще не может добавить кнопку.Есть предложения? 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  min-width: 250px;
}

.testBtn {
  width: 100%;
  background-color: grey;
  color: white;
  border: none;
}

/* Style the header */
.header {
  background-color: black;
  padding: 30px 40px;
  color: white;
  text-align: center;
}

/* Clear floats after the header */
.header:after {
  content: "";
  display: table;
  clear: both;
  border: none;
}


/* Style the "Add" button */
.addBtn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.addBtn:hover {
  background-color: #bbb;
}
.Btn {
  padding: 10px;
  width: 25%;
  background: #d9d9d9;
  color: #555;
  float: left;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.Btn:hover {
  background-color: #bbb;
}
</style>
</head>
<body>

<div id="myDIV" class="header">
  <h2 style="margin:5px">Test Button List</h2>
  <span onclick="newSample()" class="addBtn">Add</span>
</div>

<div class="testBtn" id="testBtn">
  <button class="Btn">Test Button #1</button>
</div>

<script>
      function newSample() {
        var p = document.getElementById("testBtn");
        var p_prime = p.cloneNode(true);
        node.appendChild(p_prime);
      }       
    </script>
</body>
</html>

1 Ответ

0 голосов
/ 05 июня 2018

Итак, вот несколько проблем. 

  • var li = document.createElement("button");

    Если это <button>, почему вы называете это var li?Используйте здесь осмысленное имя. 

  • var inputValue = document.getElementById("myUL").value;

    #myUL - это <div> (поэтому, почему оно называется UL, это еще одна загадка).Вы рассматриваете это как <input />, пытаясь получить его значение.Если вы хотите контент HTML, используйте innerHTML ... 

  • var t = document.createTextNode(inputValue);

    ... но вы создаете текстовый узел, поэтому я не знаю, что вы 'ожидаешь больше.Все это очень сбивает с толку. 

  • li.appendChild(t);

    Это, наверное, хорошо.Вы добавляете текстовый узел к кнопке.Кажется, хорошо. 

  • if (inputValue === !"") {

    Перевод: «если inputValue идентичен true» - это никогда не может произойти, потому что inputValue является строкой, а true являетсялогическое значение.Вы имели в виду inputValue !== ""?

В целом, это беспорядок.То, что вы, вероятно, хотите сделать, это получить кнопку «шаблон» и использовать на ней .cloneNode(true), а затем добавить ее в контейнер.

...