0

El código que voy a mostrar fue basado en el código del link que les dejo en la descripción ¿Cómo multiplicar y sumar inputs con miles y decimales, con JavaScript? para que sepan de donde saque la información. Estoy intentando que este código de formato de precio funcione como en el link anterior y me di cuenta que funciona solo con table y sus raices tbody tr td etc y además funciona solo en un mismo tr y con las etiquetas td o th, o sea, no se puede plasmar verticalmente si no horizontal siempre y cuando se vea respaldado por una tabulación completa como les comento, de otra manera no responde. Si quisiera que me dieran una opinión así la verdad del porque ocurre esto, se los agradecería mucho, muchas gracias, que pasen buenas noches

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Requisición de personal &#8211; RH.con</title>
    </head>
    <body>
        
                        <form action="" method="POST" >
                                       
                            <div style="float: left; width: 25%">
                                <div><label>Precio: </label><input type="text" style="float: right" class="input" ></div>
        <br>
        <div><label>Cantidad: </label><input type="text" style="float: right" class="input" ></div>
        <br>
        <div><label>Total: </label><input type="text" style="float: right" class="total" readonly></div>
                            </div>
</form>
    </body>
</html> 

    <script>
    let input = document.querySelectorAll(".input");
input.forEach(function(e) {
    // Solo es necesario un evento, no necesitas otros
    e.addEventListener("input", multiplica);
});
function multiplica() {
    let tr = this.closest("tr");

    // inputs[0] es precio, primera posición
    // inputs[1] es cantidad
    let inputs = tr.querySelectorAll(".input");
    
    // Eliminar puntos, remplazar coma por punto y asegurar que es un número
    // Si algo falla, el valor será cero
    let precio = parseFloat(inputs[0].value.replaceAll(',', '').replace(',', '.')) || 0;

     // El input de cantidad es numérico, no es necesario hacer remplazos
    let cantidad = parseFloat(inputs[1].value) || 0;
    
    // Calcuar total de esta fila
    tr.querySelector('.total').value = (precio * cantidad).toFixed(2);
}
</script>

1 respuesta 1

1

Estabas haciendo this.closest("tr") y en el html no tienes ninguna etiqueta tr con lo cual no funciona.

Podrías hacerlo de la siguiente manera:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Requisición de personal &#8211; RH.con</title>
    </head>
    <body>
        <form action="" method="POST" >               
            <div style="float: left; width: 40%">
                <div>
                    <label>Precio: </label>
                    <input type="text" style="float: right" class="input" >
                </div>
                <br>
                <div>
                    <label>Cantidad: </label>
                    <input type="text" style="float: right" class="input" >
                </div>
                <br>
                <div>
                    <label>Total: </label>
                    <input type="text" style="float: right" class="total" readonly>
                </div>
            </div>
        </form>
    </body>
    <script>
        window.onload = function(){
            let inputs = document.querySelectorAll(".input");
            inputs.forEach(function(e) {
                // Solo es necesario un evento, no necesitas otros
                e.addEventListener("input", multiplica);
            });
        }
        function multiplica() {

            // inputs[0] es precio, primera posición
            // inputs[1] es cantidad
            let inputs =  document.querySelectorAll(".input");

            //Eliminar puntos, remplazar coma por punto y asegurar que es un número
            // Si algo falla, el valor será cero
            let precio = parseFloat(inputs[0].value.replaceAll('.', '').replace(',', '.')) || 0;

            // El input de cantidad es numérico, no es necesario hacer remplazos
            let cantidad = parseFloat(inputs[1].value) || 0;
            
            // Calcuar total de esta fila
            document.querySelector('.total').value = (precio * cantidad).toFixed(2);
        }
    </script>
</html> 
    

6
  • A ver, creo que no entendiste, dejé el link anterior para que supieras de dónde vino de dónde vino la información, ahí se hizo en table y tr, yo lo quiero hacer con div tal como lo mostré, veo que no me entendiste el 8 mar. 2022 a las 15:00
  • Ok ya ví lo que hiciste, déjame ver que tal el 8 mar. 2022 a las 15:01
  • Bueno, ya observé y chequé lo que plasmaste aquí en la página y me di cuenta que también incluso tuve el error en el tr.closest sin necesidad de quitarlo, bueno es lo que voy a averiguar en otro momento, pero de todos modos muchas gracias por ser quien me ha resuelto esta duda, dios te bendiga y pásatela muy bien el 8 mar. 2022 a las 15:38
  • Si das por resuelta la duda marca como buena la respuesta, muchas gracias el 8 mar. 2022 a las 15:56
  • Mi voto no contó, necesito 125 de reputación lo siento 😳 el 8 mar. 2022 a las 17:50

Tu Respuesta

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

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