我无法保存输入（HTML 和 JS）

Question

尊敬的朋友们，我是网络开发的学生，并且是自学的。另外，我正在学习 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);}我尝试了其他函数，如何创建数组，但我不知道这是否是处理它的最佳方法。

Answer 1

这是带有评论的综合解决方案。

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>

Answer 2

你必须获得元素的正确ID：

<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>

Answer 3

如果要创建 HTML 输入值数组，请使用：

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

方括号定义一个新数组，获取value参数即可获取标签内的内容<input>。

Answer 4

你可以定义一个类

班级球员{

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

并创建尽可能多的对象并将每个对象添加到数组中，如下所示

var obj = 新玩家(nombarvalue, colorvalue);

var 列表 = [];

列表.push(obj);

然后迭代这个对象数组来打印一个列表