Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

52
Vistas
Javascript transfer input value to onclick function

I have a very simple question. I just began learning javascript so I can't figure out the problem. Here is my code.

<div class="card mb-4 shadow-sm">
            <div class="card-header">
                <h4 class="my-0 font-weight-normal">TEST Product</h4>
            </div>
            <div class="card-body">
                <h1 class="card-title pricing-card-title">$100</h1>
                <button type="button" class="btn btn-block btn-outline-primary"
                    onclick="cartLS.add({id: 1, name: 'Product 1', quantity: 100})">Add to
                    Cart</button>
            </div>
        </div>

As you can see there is an onclick function. In this example, when the button is clicked, the product addition to the cart must be like that.

( id:1 name: Product 1 quantity:100 ).

I want to determine the quantity value with an input. Instead of the button I would like to put an input and adding the products quantity as that input value. How can I do that ?

Thanks a lot.

7 months ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

I've abstracted the onClick function for ease. The reason I use an Object called product is for future changes; it will be easier to find problems and manage the code.

    <div class="card mb-4 shadow-sm">
    <div class="card-header">
        <h4 class="my-0 font-weight-normal">TEST Product</h4>
    </div>
    <div class="card-body">
        <h1 class="card-title pricing-card-title">$100</h1>
        <label for="quantity">Qty: </label>
        <input name="quantity" id="quantity" type="number" placeholder="1" />

        <button
            type="button"
            class="btn btn-block btn-outline-primary"
            onClick="handleClick()"
        >
            Add to Cart
        </button>
    </div>
</div>

<script>
    const handleClick = () => {
        const product = {
            id: 1,
            name: "Product 1",
            quantity: document.getElementById("quantity").value,
        };
        cartLS.add(product);
    };
</script>
7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.