我无法保存输入（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 eventform.addEventListener("submit", (e) => {&nbsp; // this will prevent the form from doing network request&nbsp; e.preventDefault();&nbsp; // lets get input elements from form by their ids&nbsp; const { nombre, color } = e.target.elements;&nbsp; // lets add new elements in the list&nbsp; const li = document.createElement("li");&nbsp; li.innerHTML = `${nombre.value} — ${color.value}`;&nbsp; list.appendChild(li);&nbsp; // lets clear the form&nbsp; nombre.value = "";&nbsp; color.value = "";});&nbsp; &nbsp; &nbsp; <form id="form">&nbsp; &nbsp; &nbsp; &nbsp; <label>Nombre: </label>&nbsp; &nbsp; &nbsp; &nbsp; <input id="nombre" type="text" />&nbsp; &nbsp; &nbsp; &nbsp; <label>Color :</label>&nbsp; &nbsp; &nbsp; &nbsp; <input id="color" type="text" />&nbsp; &nbsp; &nbsp; &nbsp; <button>Añade Participante</button>&nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; <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">&nbsp; &nbsp; function AddCompetidor(){&nbsp; &nbsp; &nbsp; &nbsp; var nombre = document.getElementById("nombre").value;&nbsp; &nbsp; &nbsp; &nbsp; var color = document.getElementById("color").value;&nbsp; &nbsp; &nbsp; &nbsp; alert (nombre + color);&nbsp; &nbsp; }</script>

Answer 3

如果要创建 HTML 输入值数组，请使用：var&nbsp;array&nbsp;=&nbsp;[nombre.value,&nbsp;color.value]方括号定义一个新数组，获取value参数即可获取标签内的内容<input>。

Answer 4

你可以定义一个类班级球员{constructor(&nbsp;nombre&nbsp;,&nbsp;color){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.nombre&nbsp;=&nbsp;nombre;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.color&nbsp;=&nbsp;color;并创建尽可能多的对象并将每个对象添加到数组中，如下所示var obj = 新玩家(nombarvalue, colorvalue);var 列表 = [];列表.push(obj);然后迭代这个对象数组来打印一个列表