Estoy trabajando en la creación de una tarjeta de crédito con JS vainilla, quiero que una vez que el usuario ingrese los números de la tarjeta, los únicos números visibles son los últimos 4 dígitos.
Entonces pensé que podría dar una identificación a los números no visibles ccHiddenNumbers y otra identificación al visible ccNumber y los escribí en la sección HTML donde quiero imprimir la entrada. Como puede imaginar, recibí un error, porque, por supuesto, dado que estaba llamando a Ids en el lugar de impresión, no se recibían datos. <span id=ccHiddenNumber>**** **** **** </span> <span id=ccNumber>0000</span> Luego moví estas identificaciones a los campos de entrada y terminé confundiéndome porque la entrada debe ser solo una que contenga ccNumbers y ccHiddenNumbers juntos. Y, por supuesto, sigo recibiendo el mismo error, aunque ya cambié las identificaciones al campo de entrada.
¿Alguien tiene alguna sugerencia sobre cómo debo abordar esta situación?
var cardNumbers= document.getElementById('cardNumbers') var ccNumber= document.getElementById('ccNumber').value; document.getElementById('ccHiddenNumber').ccNumber; console.log('this is the cc TOTAL NUMBER: '+ccNumber); var ccVisibleNumber = ccNumber.substring(ccNumber.length-4); console.log('this is the CC number: '+ ccVisibleNumber); document.getElementById('ccNumber').value = '**** **** **** '+ ccVisibleNumber; cardNumbers.addEventListener('input', function () { if (cardNumbers.value.length === 0) { document.getElementById('cardNumbers').innerHTML = '**** **** **** 2345'; } else { document.getElementById('cardNumbers').innerHTML = cardNumbers.value; } }); <!--input field--> <div class="field-container"> <label for="ccNumber">Card Number</label> <input id="ccNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000 0000 0000"> <input id="ccHiddenNumber" type="text" pattern="[0-9]*" inputmode="numeric" placeholder="0000"> </div> <!--printed info--> <span id=cardNumbers> **** **** **** 0000 </span>