0

Necesito que el texto que añada en un input y el numero que añada en otro se guarden en variables diferentes, he probado diferentes métodos pero ninguno me funciona, (para comprobar si funciona llamo a un alert) y, o me aparece [object HTMLInputElement], o me aparece null o me aparece en blanco el alert

Añade dato
<input type="text" name="agregarDato" id="addFact"><br><br>
Escribe valor
<input type="number" name="agregarValor" id="addValue"><br><br>
Escribe valor extra
<input type="number" name="agregarValorextra" id="addExtraValue"><br><br>
<button id="addAll">Añadir</button>
function inicio() {
    //Recoger los datos de los input
    let empresa = document.getElementById("addFact").value;
    let valor1 = document.getElementById("addValue").value;
    let valorExt = document.getElementById("addExtraValue").value;
    let enviar = document.getElementById("addAll");

    //Cargar datos al presionar boton de enviar
    enviar.onclick = function (e) {
        alert(empresa + " " + valor1 + " " + valorExt);
    }
}

Con el codigo que he compartido al ejecutarse el alert aparece en blanco.

5
  • Deberías obtener los valores dentro del evento, porque los asignas antes de que se hayan modificado.
    – Triby
    el 28 ene. 2021 a las 22:34
  • ``` let empresa; let valor1; let valorExt; let enviar = document.getElementById("addAll"); enviar.onclick = function (e) { empresa = document.getElementById("addFact").value; valor1 = document.getElementById("addValue").value; valorExt = document.getElementById("addExtraValue").value; alert(empresa + " " + valor1 + " " + valorExt) } ``` Algo asi??
    – GreenLass
    el 28 ene. 2021 a las 22:47
  • Aunque no se ve muy bien, perdon por eso... en los comentarios no se puede poner salto de linea
    – GreenLass
    el 28 ene. 2021 a las 22:47
  • Puedes editar la pregunta para actualizar el código. Parece más o menos correcto, pruébalo y nos cuentas.
    – Triby
    el 28 ene. 2021 a las 23:46
  • Lo actualizaria pero estoy completamente atascado asi que no puedo, lo siento
    – GreenLass
    el 2 feb. 2021 a las 20:00

2 respuestas 2

0

Intenta lo siguiente

function inicio() {
    //Recoger los datos de los input
     empresa = $("#addFact").val();
     valor1 = $("#addValue").val();
     valorExt = $("#addExtraValue").val();
    
alert(empresa + " " + valor1 + " " + valorExt);
   console.log(empresa + " " + valor1 + " " + valorExt);
   
}

 //Cargar datos al presionar boton de enviar
$("#addAll").click(function() {
   inicio();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Añade dato
<input type="text" name="agregarDato" id="addFact"><br><br>
Escribe valor
<input type="number" name="agregarValor" id="addValue"><br><br>
Escribe valor extra
<input type="number" name="agregarValorextra" id="addExtraValue"><br><br>
<button id="addAll">Añadir</button>

-1

Cuando creas la variable tenes que sacarle el .value y añadirlo cuando queres tomar el valor.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <input type="text" class="agregarDato" /><br /><br />
        Escribe valor
        <input type="number" class="agregarValor" /><br /><br />
        Escribe valor extra
        <input type="number" class="agregarValorextra" /><br /><br />
        <button class="addAll" type="submit">Añadir</button>

        <script src="codigo.js"></script>
    </body>
</html>

codigo.js


let agregarDato = document.querySelector(".agregarDato");
let agregarValor = document.querySelector(".agregarValor");
let agregarValorextra = document.querySelector(".agregarValorextra");
let addAll = document.querySelector(".addAll");

addAll.addEventListener("click", function () {
    alert(
        "agregar Dato: " +
            agregarDato.value +
            " agregar Valor: " +
            agregarValor.value +
            " agregar Valor extra: " +
            agregarValorextra.value
    );
});

te dejo el enlace a codepen: https://codepen.io/matimagallanes/pen/XWNWWRr

1
  • @andres martinez, una duda... que es y para que se utiliza val(), lo digo mas que nada para no poner en mi codigo algo que no entiendo como funciona
    – GreenLass
    el 2 feb. 2021 a las 19:58

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.