Как сделать так, чтобы кнопка клонировала родительский div на тело - PullRequest
Новая
       0

Как сделать так, чтобы кнопка клонировала родительский div на тело

1 голос
/ 07 марта 2020

Я пытаюсь получить кнопку, которая при нажатии клонирует родителя родительского элемента кнопок и добавляет к телу: 

<div class="userposts">
    <p class="postusername">Posted by $postuser</p>
    <script type="text/javascript">
        function click() {
            var div = this.parentElement.parentElement;
            var clone = div.cloneNode(true);

            document.body.appendChild(clone);

        }
    </script>
    <h2 class="posttitle"><button onclick="click()" type="button">$title<button></a></h2>

Это то, что у меня есть, но это не так. ничего не добавляет и не оставляет сообщений об ошибках.

Ответы [ 4 ]

1 голос
/ 07 марта 2020

Я думаю, что функция click () является зарезервированным именем в JavaScript, попробуйте переименовать его.

0 голосов
/ 07 марта 2020

лучше оставить чистым html

<h3 class="toClone">Some title <button type="button">[toClone]</button></h3>

и использовать onclick в JS функции 

   let butonClone = document.querySelector('button')
   let myBody = document.querySelector('body')
   let toClone = document.querySelector('.toClone')

   butonClone.onclick = function clone() {
        myBody.append(toClone.parentNode.cloneNode(true))
   }
0 голосов
/ 07 марта 2020

Причина, по которой ваша функция click не была вызвана, заключается в том, что код JavaScript в вашем атрибуте выполняется в контексте, где атрибуты элемента копируются в контекст кода JavaScript атрибута. Таким образом, ваша click функция была скрыта за click методом элемента .

См. MDN's Обработчики onevent DOM: HTML атрибуты onevent

Вы можете воспроизвести этот эффект любым свойством / методом / et c. элемента DOM кнопки.

Например, следующая кнопка при нажатии вызовет ошибку: Uncaught TypeError: innerHTML is not a function

<script>
    function innerHTML(el) {
        console.log(el.innerHTML);
    }
</script>
<button onclick="innerHTML(this)">Click Me</button>

Обратите внимание, что этот эффект применяется только к JavaScript в строке атрибута. Если мы используем имя функции, которое не пересекается с атрибутом элемента DOM, мы можем безопасно избежать такого рода ошибок: 

<script>
    function handleClick(el) {
        // We can safely call the innerHTML function from within this function
        innerHTML(el);
    }
    function innerHTML(el) {
        console.log(el.innerHTML);
    }
</script>
<button onclick="handleClick(this)">Click Me</button>
0 голосов
/ 07 марта 2020

Прежде всего, почему вы ставите </a>?

И вот как: 

function clone(e) {
  document.querySelector("body").append(e.parentNode.cloneNode(true))
}
<body>
<h3>Hello World <button type="button" onclick="clone(this)">[clone]</button></h3>
</body>
  1. Использовать атрибут onclik
  2. Поместить this в функции, подобные onclick="clone(this)"
  3. Получить родительский элемент узел e.parentNode
  4. Клон с cloneNode(true)

Пока!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...