I'm working on creating a credit card with JS vanilla, I'm want that once the user type the numbers of the card, the only visible numbers are the last 4 digits.
So I thought I could give an ID to the not visible numbers ccHiddenNumbers and another id to the visible one ccNumber and wrote them in the HTML section where I want to print the input. As you can imagine I got an error, because of course since I was calling Ids in the printing place, not data was being received.
<span id=ccHiddenNumber>**** **** **** </span> <span id=ccNumber>0000</span>
Then I moved this ids to the input fields and I ended up getting confuse because the input should be just one that contains ccNumbers and ccHiddenNumbers together.
And of course I keep getting the same error, even tho I already changed the ids to the input field.
Does anyone have a suggestion on how should I tackled this situation?
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>