Estoy pasando esto a HTML… como puedo hacer que el input lo reciba como un array y no como un string/número ?? Intente ponerlo en html c...

Sofía González Chavira

Pregunta

student•hace 4 años

Estoy pasando esto a HTML… como puedo hacer que el input lo reciba como un array y no como un string/número ??

Intente ponerlo en html como …

<input id="list" type="number" placeholder="Lista" name="lista[]"/>

pero no funciono 😦

Jossie Steeven Quintero Giron

student•hace 4 años

En mi solución voy agregando cada elemento a una lista (<ul>) al mismo tiempo se agrega a un arreglo en JS.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Average</title>
</head>

<body>
    <h1>Average</h1>
    <form action="">
        <label for="inputElement"></label>
        <input type="number" name="inputElement" id="inputElement" />
        <button type="button" onclick="onClickAddElement()">Add</button>
        <ul id="listElement"></ul>
        <button type="button" onclick="onClickAverageBtn()">Calculate</button>
    </form>
    <p id="result"></p>
    <script src="./js/promedio.js"></script>
</body>

</html>

JS
const getAverage = (list = []) => {
    let sum = list.reduce((sumTotal, number) => sumTotal + number, 0);
    const average = sum / list.length;
    return average.toFixed(2);
};
const list = [];
const onClickAddElement = () => {
    const inputElement = document.getElementById("inputElement");
    const listElement = document.getElementById("listElement");
    let element = parseInt(inputElement.value);
    list.push(element);
    listElement.innerHTML += `<li>${element}</li>`;
};
const onClickAverageBtn = () => {
    const average = getAverage(list);
    alert(`The average is: ${average}`);
};

Kevin J. Zea Alvarado

student•hace 4 años

Hola, Sofía. 👋

Creo que está complicado hacerlo desde el HTML. Te sugiero que manejes eso desde JavaScript. Podrías hacer algo así:

HTML:

<input id="list" type="number" placeholder="Ingresa un número" name="lista" />
<button id="botonPromediar" onclick="ingresarValor()">Promediar</button>

JS:

const input = document.getElementById("input");
const arreglo = [];

function ingresarValor() {
  const nuevoValor = input.value;
  arreglo.push(nuevoValor);
}

Por lo tanto, cada vez que se dé clic al botón, se agregará el valor del input a

arreglo

. Esto hará que

arreglo

se vaya llenando poco a poco de valores que el usuario vaya ingresando.

Estoy pasando esto a HTML… como puedo hacer que el input lo reciba como un array y no como un string/número ?? Intente ponerlo en html c...

Curso Práctico de JavaScript

Curso Práctico de JavaScript