0

Lo que deseo es que al dar añadir, me vaya agregando los valores al array, y que solo pueda hacerlo el numero de veces que ya seleccioné, pero lo que hace mi función es leer los datos de x y y, posteriormente los agrega 3 veces al array final, osea tengo solo 1 valor por incógnita repetido 3 veces. De ante mano, gracias uwu

<div>
        Número de intervalos:
        <input type="text" id="numero"><br><br>
        <input type="submit" value="Aceptar" id="inicio"><br><br>

        Ingrese X: 
        <input type="text"  id="valorX"> <br><br>
        Ingrese Y: 
        <input type="text" id="valorY"> <br><br>
        <input type="submit" value="Añadir" id="add">
    </div>

    <input type="submit" value="Generar tabla" id="mostrar">
    <div id="mostrarNumeros"></div>

Acá la función:

function getDatos(x,y){
    var num=document.getElementById('numero').value;
    var tabla=[];


    for(let i=0;i<num;i++){
    var linea=[];
    var x=document.getElementById('valorX').value;
    var y=document.getElementById('valorY').value;

    linea.push(x,y);
    tabla.push(linea);
    }


    return tabla;
}

2 respuestas 2

0

Tienes varios problemas con la lógica, o al menos por lo que has enseñado. Si quieres que el número de intervalos se añada con un botón, los valores con otro y que la tabla se muestre con otro, no puedes hacerlo con una única función. Tu código JS debería de parecerse más a esto.

  //Inicializo las variables al principio del script
 var tabla=[];
 var num = 0;
 //función que recoge el número de intervalos
 function numIntervalos(){
   num = document.getElementById('numero').value;
 }
 //Función que recoge x e y y los añade a tabla
 function getDatos(){

   for(let i=0;i<num;i++){
     let linea=[];
     let x=document.getElementById('valorX').value;
     let y=document.getElementById('valorY').value;

     linea.push(x,y);
     tabla.push(linea);
}

}

Lo siguiente que no veo que hagas por lo que has subido, es el cuándo llamas a la función Para llamar a la función haz uso del onclick, y cambia de esta forma los input:

<input type="button" value="Aceptar" id="inicio" onclick="numIntervalos()">    
<input type="button" value="Añadir" id="add" onclick="getDatos()">

Te he cambiado el type a button porque no tiene sentido el submit sin estar dentro de un formulario. Y he eliminado los párametros x e y ya que luego en la función los recoges mediante el getElementById().

Espero que te haya aclarado un poco el como hacerlo, la llamada a generar la tabla te la dejo a tí. Como comentario adicional, creo que algunos botones sobran y quitarlos te ayudaría a simplificar el código, pero si los tienes por algo sera :D

Un saludo!

0

Voy a compartir contigo un ejemplo, que si puede no ser el mejor, creo que hace lo que pretendías. Quizá el ejemplo sea extenso y se pueda afinar más, pero supongo que te puedas hacer una idea:

document.addEventListener("DOMContentLoaded", () => {
    let addButton = document.getElementById("add");
    let timesButton = document.getElementById("inicio");
    let valorX = document.getElementById("valorX");
    let valorY = document.getElementById("valorY");
    let tabla = [];
    let count = 0;

    timesButton.addEventListener("click", () => {
        if(document.getElementById("numero").value.trim() == ""){
            alert("Tienes que introducir una cantidad!!!");
        }else{
            count = document.getElementById("numero").value;
            alert(`Puedes introducir ${count} combinaciones`);
        }
    });

    addButton.addEventListener("click", () => {
        if(valorX.value.trim() == "" || valorY.value.trim() == "" || count == 0){
            alert("Debes de introducir todos los valores!!!");
        }else{
            let x = valorX.value;
            let y = valorY.value;   
            getDatos(x, y);
        }       
    });

    function getDatos(x,y){
        if(valorX.value.trim() == "" || valorY.value.trim() == "" || count == 0){
            alert("Te falta algún valor!!");
        }else{
            let linea = [];
            linea.push(x,y);
            tabla.push(linea);
            alert(`Los valores introducidos en la posicion ${tabla.length} son ${x} y ${y}.`);
            if((tabla.length) == count){
                alert("Ya has introducido todas las combinaciones.");
                alert(tabla);
                console.log(tabla);
            }
            return tabla;
        }
    }

}); 

Yo personalmente prefiero no utilizar el atributo "onclick" en el HTML. Creo que la mejor opción sería agregar eventos a los elementos del DOM mediante Javascript.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.