Блог

Уважаемые друзья,

Я студент веб-разработки и самоучка. Кроме того, я изучаю DOM с помощью Javascript. Я создаю простой формуляр с целью играть с позициями, менять цвета и управлять DOM и т. Д. Я хочу создать несколько участников и отобразить их в списке.

Это часть моего HTML-кода.

 <label>Nombre: </label>
<input id="addNombre" type="text"/>
<label>Color :</label>
<input id="addNombre" type="text"/>
<button onclick="AddCompetidor()">Añade Participante</button>
  

Я сделал и переделал много функций JS, это последняя, которую я сделал.

 function AddCompetidor(){
    var nombre = document.getElementById("addNombre");
    var color = document.getElementById("addColor");
    alert (nombre,color);
}
  

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

Большое спасибо!!

Вот комплексное решение с комментариями.

 const form = document.getElementById("form");
const list = document.getElementById("list");

// let's handle the form submit event
form.addEventListener("submit", (e) => {
  // this will prevent the form from doing network request
  e.preventDefault();

  // lets get input elements from form by their ids
  const { nombre, color } = e.target.elements;

  // lets add new elements in the list
  const li = document.createElement("li");
  li.innerHTML = `${nombre.value} — ${color.value}`;
  list.appendChild(li);

  // lets clear the form
  nombre.value = "";
  color.value = "";
});  

       <form id="form">
        <label>Nombre: </label>
        <input id="nombre" type="text" />
        <label>Color :</label>
        <input id="color" type="text" />
        <button>Añade Participante</button>
      </form>
      <ul id="list"></ul>  

Если вы хотите создать массив входных значений HTML, используйте:

 var array = [nombre.value, color.value]
  

Квадратные скобки определяют новый массив, и при получении value параметра получается то, что находится внутри <input> тега.

вы должны получить правильный идентификатор элемента:

 <label>Nombre: </label>
<input id="nombre" type="text"/>
<label>Color :</label>
<input id="color" type="text"/>
<button onclick="AddCompetidor()">Añade Participante</button>

<script type="text/javascript">
    function AddCompetidor(){
        var nombre = document.getElementById("nombre").value;
        var color = document.getElementById("color").value;
        alert (nombre   color);
    }
</script>
  

Вы можете определить класс

классные игроки {

 constructor( nombre , color){ 
         this.nombre = nombre; 
         this.color = color;   
  

}}
и создайте столько объектов и добавьте каждый объект в массив, подобный этому

var obj = новые игроки (nombarvalue, colorvalue);

список переменных = [];

list.push(obj);

затем выполните итерацию этого массива объектов для печати списка