入力プロパティから値を取得

Question

私は以下の入力からdata-cart-item-idの値を取得しようとしています。しかし、私はそれをすることができません。

<td> 
<input 
    id="qinput-xxx" 
    data-link="http:xxxx" 
    data-item-id="xxx" 
    data-cart-item-id="xxxx" 
    class="qty cart-item-quantity input-text" name="" 
    value="1" 
/> 

<button id="qbutton-xxx" 
     data-item-id="xxx" 
     disabled="disabled" 
     data-update 
     data-cart-item-update 
     class="button quantity-button"> 
    ok 
</button> 
</td> 

私は次のコードを試していますが、何も得られません。

document.querySelectorAll('data-cart-item-id') 

Answer 1

data-cart-item-idタグ名ではありません。それはプロパティなので、input[data-cart-item-id]または[data-cart-item-id]を使用してください。

また、querySelectorAllは要素の配列を返すので、インデックスを指定する必要があります。あなたはそれが製品に指定されている場合にのみ、あなたは要素まで0からループに使用後、製品の配列を取得します 数量クラスのために、たとえば、クラス名で要素を取得する必要があります

console.log(document.querySelectorAll('[data-cart-item-id]')[0].getAttribute('data-cart-item-id'));

<td> 
 
<input 
 
    id="qinput-xxx" 
 
    data-link="http:xxxx" 
 
    data-item-id="xxx" 
 
    data-cart-item-id="xxxx" 
 
    class="qty cart-item-quantity input-text" name="" 
 
    value="1" 
 
/> 
 

 
<button id="qbutton-xxx" 
 
     data-item-id="xxx" 
 
     disabled="disabled" 
 
     data-update 
 
     data-cart-item-update 
 
     class="button quantity-button"> 
 
    ok 
 
</button> 
 
</td>

Answer 2

inputが、それは独自のidのしているので、私が代わりにgetElementByIdを使用するためにあなたをお勧めします。次に、data-cart-item-idの属性値をgetAttributeとしてください。

var elem = document.getElementById('qinput-xxx'), 
 
    data = elem.getAttribute('data-cart-item-id'); 
 
    console.log(data);

<td> 
 
    <input id="qinput-xxx" data-link="http:xxxx" data-item-id="xxx" data-cart-item-id="xxxx" class="qty cart-item-quantity input-text" name="" value="1" /> 
 
    <button id="qbutton-xxx" data-item-id="xxx" disabled="disabled" data-update data-cart-item-update class="button quantity-button">ok</button> 
 
</td>

Answer 3

長さを指定すると、getAttribute（）関数を使用して、その属性値を取得します。