Блог

Главная - Вопросы по программированию - Добавление события щелчка в динамически созданный html-элемент с помощью vanilla JS

Добавление события щелчка в динамически созданный html-элемент с помощью vanilla JS

#javascript #html

#javascript #HTML

Вопрос:

Я хочу создать простой элемент div в html с помощью vanilla JS. Я пытаюсь добавить EventListener к кнопке, чтобы создать div по щелчку, но возникает странная ситуация, поскольку я не могу понять, почему?

Я пытаюсь создать div под этим [элементом div с классом container-div], когда я нажму на кнопку. Но когда я нажимаю на него, функция createDiv не может указать аргумент для параметра высоты. почему это происходит? Помогите мне, пожалуйста, очень признателен.

Этот рисунок для прямого вызова функции перед нажатием кнопки

На этом рисунке область с красной границей увеличивается после того, как я несколько раз нажал кнопку

Я пытаюсь создать div без заполнения, но….

     function createDiv(
      height = "200px",
      width = "200px",
      border = "solid 1px red"
    ) {
      const div = document.createElement("div");
      div.style.height = height;
      div.style.width = width;
      div.style.border = border;
      document.getElementsByClassName("container-div")[0].appendChild(div);
      return div;
    }
const createDivbtn = document.getElementById("createDiv");
    createDiv();
    createDiv(undefined, undefined, "solid 5px blue");
    createDivbtn.addEventListener("click", createDiv);  
 <div class="row">
  <div class="col-6">
    <button id="createDiv" class="btn btn-outline-black1">
            Create Div
          </button>
  </div>
  <div class="col-6 container-div"></div>
</div>

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

1. Как вы можете видеть из фрагмента, который я вам сделал, нет createDivbtn необходимости добавлять прослушиватель событий в

Ответ №1:

Вам нужно добавить щелчок к кнопке

Также вы возвращаете div, чтобы использовать его для других целей — смотрите, как здесь:

Я бы переместил вставку после создания

 function createDiv(
  height = "200px",
  width = "200px",
  border = "solid 1px red"
) {
  const div = document.createElement("div");
  div.style.height = height;
  div.style.width = width;
  div.style.border = border;
  return div;
}

document.getElementById("createDiv").addEventListener("click",function() {
  const createdDiv1 = createDiv(undefined, undefined, "solid 5px blue");
  createdDiv1.textContent = "1. created";
  document.getElementsByClassName("container-div")[0].appendChild(createdDiv1);

  const createdDiv2= createDiv(undefined, "300px", "solid 5px green");
  createdDiv2textContent = "2 created";
  document.getElementsByClassName("container-div")[0].appendChild(createdDiv2);
})  
 <div class="row">
  <div class="col-6">
    <button id="createDiv" class="btn btn-outline-black1">
            Create Div
          </button>
  </div>
  <div class="col-6 container-div"></div>
</div>

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

1. Сначала я забыл добавить эту строку в свой вопрос, поскольку я объявил ее вверху в своем редакторе. Но большое спасибо за вашу помощь .

2. я видел это, спасибо за вашу заботу . но я пытался исправить эту проблему с помощью этого кода ранее. код: {createDivbtn.addEventListener(«click», createDiv((h1 = «200px»)));} но у меня не получилось, так как после того, как я написал этот код, синий div появляется еще до того, как я нажму эту кнопку. Не могли бы вы объяснить, почему это происходит.

3. Вы не можете сделать это таким образом. Код, который вы вставляете, выполняет createDiv, когда он достигается механизмом сценариев. Вы могли бы сделать createDivbtn.addEventListener("click", function() { createDiv("200px")})

Ответ №2:

При вызове функции с помощью события DOM, если аргумент не указан, первым аргументом будет сам evevnt .

Вот почему в вашем случае, нажав на кнопку, вы получаете div без высоты. Потому что значение параметра height равно не «200px», а самому событию. Попробуйте записать высоту в консоль, и вы увидите ее. mplungjan прекрасно решает проблему в своем ответе.

Удачи!

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

1. Большое спасибо йоханан, mplungjan решил мою проблему, и вы объяснили это. Я также пытался передать неопределенное или другое значение для первого аргумента, но затем div с синей рамкой был создан еще до того, как я нажал эту кнопку. Не могли бы вы объяснить, почему это происходит. Здесь — код: createDivbtn.addEventListener(«click», createDiv(h1 =»200 пикселей»));

2. Это потому, что вы вызываете функцию, когда назначаете ее событию. Добавленные вами круглые скобки вызывают его, это то, что они должны делать.

3. Хорошо, теперь я думаю, что сначала я должен узнать больше о eventlistener и управлении dom. Спасибо