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

Question

Respected friends,

I'm a student of web devel, and self-taught. Also, I'm learning about DOM with Javascript. I am making a simple formulary, with the objective to play with positions, change colors and managing the DOM, etc. I want to create some participators, and display them in a list.

This is the part of my HTML code.

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

I have done and redone many JS functions, this is the last one I have done.

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

I tried with others functions, how to create an array, but I don't know if it's the best way to approach it.

Thanks a lot!!

Answer 1

Here is the comprehensive solution with comments.

 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

If you want to create an array of HTML input values, use:

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

The square brackets define a new array, and getting the value parameter gets what's inside the <input> tag.

Answer 3

you have to get the correct id of element:

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

You can define a class

class players{

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

}} and create as many object and add each object in a array like this

var obj = new players( nombarvalue, colorvalue);

var list = [];

list.push(obj);

then iterate this array of object to print a list