Блог

Главная - Вопросы по программированию - Связанная проблема с динамическим добавлением флажков в DOM

Связанная проблема с динамическим добавлением флажков в DOM

#javascript #html

#javascript #HTML

Вопрос:

Вот мой код:

 const boxes = ["we", "the people of Earth", "I'm", "they're"];
/* Checkbox scripts */
const boxsContainer = document.querySelector('.boxs-container');

const checkboxes = boxes.map( box => {
    
  const divBoxes = document.createElement('div');
  divBoxes.classList.add('container-checkbox');
  divBoxes.innerHTML = `
    <input class="checkmark" onclick='copyText("${box}")' type="checkbox" name="${box}">
    <label id="${box}" for="${box}">amp;nbsp;amp;nbsp;${box}</label>
  `;
  boxsContainer.appendChild(divBoxes);
  return divBoxes.querySelector('input'); 
    
});

function copyText(text) {
    console.log(text);
}  
 <div class="boxs-container"></div>

Как вы видите, я хочу динамически добавлять boxes элементы в DOM с помощью флажка, и когда вы проверяете каждый из них, вы получаете журнал box , который был проверен.

Но проблема в том, что я получаю ошибки, если у меня есть текст со знаком апострофа ' …

нажмите «Я» или «они», и вы получите сообщение об ошибке…

И вот вкладка «Элементы» с этим проводным результатом!!!

связанная

Как это исправить?

Комментарии:

1. Это потому, что вы разделяете значение атрибута одинарными кавычками : onclick='copyText("${box}")' . Как это будет выглядеть в HTML onclick='copyText("they're")' , так что значение onclick атрибута заканчивается на втором ' . Было бы лучше использовать DOM API для создания этих элементов ( document.createElement ) и назначить обработчик событий с onclick помощью or addEventListener .

2. Я не могу сделать это самостоятельно, не могли бы вы дать ответ…

Ответ №1:

Как указал @Felix, вам необходимо использовать addEventListener. Этот код поможет.

 const boxes = ["we", "the people of Earth", "I'm", "they're"];
/* Checkbox scripts */
const boxsContainer = document.querySelector('.boxs-container');

const checkboxes = boxes.map( box => {
    
  const divBoxes = document.createElement('div');
  divBoxes.classList.add('container-checkbox');
  var input = document.createElement('input');
  input.setAttribute("type", "checkbox");
  input.setAttribute("name", `${box}`);
  input.addEventListener('click', copyText.bind(null,`${box}`));
  divBoxes.appendChild(input);
  
  var x = document.createElement("label");
  x.setAttribute('for', `${box}`)
  x.setAttribute('id', `${box}`)
  x.innerHTML = `${box}`
  divBoxes.appendChild(x);
  

  /*divBoxes.innerHTML = `
    <input class="checkmark" onclick='copyText("${box}")' type="checkbox" name="${box}">
    <label id="${box}" for="${box}">amp;nbsp;amp;nbsp;${box}</label>
  `;*/
  
  boxsContainer.appendChild(divBoxes);
  return divBoxes.querySelector('input'); 
    
});

function copyText(e, text) {
    console.log(e);
}