Блог

У меня есть кнопка, которая создает два новых поля ввода каждый раз, когда пользователь нажимает на кнопку. Я хочу создавать значок font awesome рядом с входными данными каждый раз, когда пользователь нажимает на кнопку. В настоящее время он работает, но создает значок только один раз, и я хочу добавлять значок для каждого раза, когда генерируются два поля. Как я могу этого добиться? Вот моя попытка:

    createNewPricedRoundShareholder() {
      var newPlatformNameInputContainer = document.getElementById(
        "round-shareholder-container"
      );

      const newPlatformNameInput = document.createElement("input");
      newPlatformNameInput.classList.add("form-control");
      newPlatformNameInput.classList.add("input");
      newPlatformNameInput.placeholder = "Username";
      newPlatformNameInput.setAttribute("type", "text");
      newPlatformNameInput.setAttribute("name", "username");

      newPlatformNameInputContainer.appendChild(newPlatformNameInput);

      var secondContainer = document.getElementById(
        "round-investment-container"
      );

      const newInitialOptionsPool = document.createElement("input");
      newInitialOptionsPool.classList.add("form-control");
      newInitialOptionsPool.classList.add("input");
      newInitialOptionsPool.placeholder = "Investment";
      newInitialOptionsPool.name = "investment";
      newInitialOptionsPool.setAttribute("type", "text");
      newInitialOptionsPool.setAttribute("name", "investment");
      secondContainer.appendChild(newInitialOptionsPool);
      secondContainer.innerHTML = '<i class="fas fa-trash"></i>';
    }
 

Причина, по которой вы видите только один значок, заключается в том, что при каждом нажатии вы заново устанавливаете secondContainer HTML-код, а не добавляете к нему. Попробуйте изменить эту строку:

secondContainer.innerHTML = '<i class="fas fa-trash"></i>';

В эту строку:

secondContainer.innerHTML = secondContainer.innerHTML '<i class="fas fa-trash"></i>';

Или, в качестве альтернативы,

secondContainer.innerHTML = '<i class="fas fa-trash"></i>';

Пожалуйста, обратите внимание, что, хотя вышеупомянутое будет работать, вы также можете определить <i /> элемент точно так же, как вы делали с входными данными, и добавить элемент secondContainer .