Question

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

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-04T17:48:42.317Z

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>