How can I get the value of a sibling input element?

Question

What I'm trying to do here is simply update my cart for my e-commerce website. To do so I need to confirm the quantity of the product with my "check button". So far I've managed to go over through all elements "check buttons", however now I'm troubled with accessing the input's value.

<div class="plus-minus-input">
        <span class="minus" data-action="remove" data-pack={{ item.product.pack }}>&#8722;</span>
        <input class="quantity" type="number" id="{{item.product.id}}" value="{{item.quantity}}"/>
        <span class="plus" data-action="add" data-pack={{ item.product.pack }}>&#43;</span>
        <span class="update-cart check" id="{{item.product.id}}">&#10004;</span>
</div>

...

checkBtns = document.getElementsByClassName("update-cart");

    for (var i = 0; i < checkBtns.length; i++){
        checkBtns[i].addEventListener("click", function(e) {
            var productId = $(this).attr("data-productId");
            var action = $(this).attr("data-action");

            var parentDiv = $(this).parentNode;
            var inputVal = parseInt(parentDiv.childNodes[1].dataset.value);
            var pack = parseInt(this.dataset.pack);
...

Answer 1

$(this) doesn't mean anything since you're not in a jQuery event handler. The simplest fix is to rectify that:

$(checkBtns[i]).click(function() { ... }

Then you have access to the clicked element in jQuery and can do this:

const inputVal = parseInt( $(this).siblings('.quantity').val() );

If you'd prefer to purge your life of jQuery (great in its day, not really necessary anymore), convert to this:

const parentDiv = e.target.parentNode;
const inputVal = parseInt(parentDiv.childNodes[1].dataset.value);

However, referring to elements by their order in your page is a fragile approach. If your layout changes it breaks. Instead, get the element by class:

const inputVal = parseInt(parentDiv.getElementByClassName('quantity')[0].value);

Answer 2

In your last line, when you use this.dataset.pack , this refers to span.update-cart which does not have a "pack" property.

Answer 3

<element>.dataset.value won't be defined because value does not have the data- prefix. MDN on dataset

 const an_input = document.getElementById('an_input'); console.log(an_input.dataset.value); console.log(an_input.value);

 <input type="number" id="an_input" value="3" />

Depending on your development environment / targeted browsers you may be able to use closest and querySelector .

 const checkBtns = document.getElementsByClassName("update-cart"); for (var i = 0; i < checkBtns.length; i++){ checkBtns[i].addEventListener("click", function(e) { const input = e.target.closest('.plus-minus-input').querySelector('.quantity'); console.log(Number(input.value)); }); }

 <div class="plus-minus-input"> <input class="quantity" type="number" id="{{item.product.id}}" value="{{item.quantity}}"/> <span class="update-cart check" id="{{item.product.id}}">&#10004;</span> </div>

Using closest should insulate you from changes that would make it so that .plus-minus-input was no longer the direct parent of the check button. (For example wrapping the button in a div for layout reasons or what have you.)