Javascript / JQuery值未设置

Question

I've been trying different techniques to get my value to be set through the placeholder "Card number", but nothing seems to be working. Even when I attempt to use normal JavaScript I get the error that document.querySelector is null.

 $('[data-card-field-placeholder*="Card"]').val('2222'); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_credit_card_number">Card number</label> <div class="field__input field__input--iframe-container" data-card-fields="number" data-card-field-placeholder="Card number" aria-describedby="error-for-number tooltip-for-number"><iframe class="card-fields-iframe" id="card-fields-number-fzjcuxuv2z000000" name="card-fields-number-fzjcuxuv2z000000" scrolling="no" src="" style="height: 43px;" frameborder="0"></iframe></div> <span id="credit_card_number_tooltip" class="field__icon icon icon--lock"> <span class="visually-hidden">Secure field</span> </span> </div> 

Answer 1

You could use text() instead of val() . Like this:

 $('[data-card-field-placeholder*="Card"]').text('2222'); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div class="field__input-wrapper field__input-wrapper--icon-right"><label class="field__label field__label--visible" for="checkout_credit_card_number">Card number</label> <div class="field__input field__input--iframe-container" data-card-fields="number" data-card-field-placeholder="Card number" aria-describedby="error-for-number tooltip-for-number"><iframe class="card-fields-iframe" id="card-fields-number-fzjcuxuv2z000000" name="card-fields-number-fzjcuxuv2z000000" scrolling="no" src="" style="height: 43px;" frameborder="0"></iframe></div> <span id="credit_card_number_tooltip" class="field__icon icon icon--lock"> <span class="visually-hidden">Secure field</span> </span> </div> 

Answer 2

Use '.attr()' instead instead of '.val()'. '.val' is for setting form elements values, whereas '.attr()' is for setting attributes.

$('[data-card-field-placeholder*="Card"]').attr('data-card-field-placeholder', '2222');

More info:

• .attr()
• .val()