проблема с appendChild()

15 августа 2021, 00:20

Вот мой код:

function f1(){ 
    var a = document.getElementById("text"); 
    var p = document.createElement("p"); 
    var c = a.cloneNode(true); 
    p.appendChild(c); 
    var b = document.getElementsByClassName("favourite")[0]; 
    b.appendChild(p); 
 
    localStorage.setItem("mytext", a.innerHTML); 
} 
 
document.getElementsByClassName("favourite")[0].innerHTML = localStorage.getItem("mytext");

.favourite{ 
    background-color: red; 
    width:300px; 
    height:200px; 
} 
 
.one{ 
    background-color: green; 
    width: 20px; 
    height:10px; 
}

<div id="text">Some long text...</div><button onclick="f1()">Add</button> 
<div class="favourite"></div>

При нажатии на кнопку "Add", текст добавляется в див class="favourite" столько раз, сколько пользователь нажмет на кнопку. Как сделать так что бы текст добавился только один раз? И ещё один вопрос - Я хочу сделать много таких дивов похожих на тот что я написала выше, они будут отличаться текстом, правильно ли я сделаю, если к каждому событию буду добавлять одну и ту же функцию f1() Ведь тогда код будет длинным.?

Answer 1

>> Правильно ли я сделаю...

Да, но удобнее сразу из скрипта повесить обработчики на все кнопки.
this указывает на элемент, который вызвал функцию (на который кликнули). И для данной разметки, text[i] можно было заменить на this.previousElementSibling

let add = document.querySelectorAll('.add'); 
let text = document.querySelectorAll('.text'); 
let fav = document.querySelector('.favourite'); 
 
for (let i = 0; i < add.length; i++) { 
  add[i].addEventListener('click', function() { 
    this.disabled = true; 
 // this.style.display = "none"; 
    let p = create('p'); 
    let c = text[i].cloneNode(true); 
    text[i].classList.add('active'); // Например. Или display: none; 
     
    p.appendChild(c); 
    fav.appendChild(p); 
    // localStorage.setItem("mytext", fav.innerHTML); 
  }); 
} 
 
function create(ele){ 
  return document.createElement(ele); 
}

.favourite { 
  background-color: #ffe2aa; 
  width: 300px; 
  height: 200px; 
} 
 
.one { 
  background-color: green; 
  width: 20px; 
  height: 10px; 
} 
 
.bubu { display: flex; } 
.add { margin: 0 5px; } 
.text { color: red; } 
.text.active { color: green; }

<div class="bubu"> 
  <span class="text">111</span><button class="add">+</button> 
  <span class="text">222</span><button class="add">+</button> 
  <span class="text">333</span><button class="add">+</button> 
  <span class="text">444</span><button class="add">+</button> 
  <span class="text">555</span><button class="add">+</button> 
</div> 
 
<div class="favourite"></div>