Updating element's innerText with input value on 'keyup'-CodePudding

I am practicing JS on this challenge from FrontEndMentor.io and just need assistance in figuring out how to get desired results.

My goal is to get the '0000 0000 0000 0000' on the class demo-numbers to update individually as the value is being typed. Example, you type '234' and it updates the card number to '2340 0000 0000 0000'... so on and so forth up to 16 digits.

[CodePen - Interactive Card Details] https://codepen.io/jdubtheegreat/pen/JjvZMBJ?editors=0010

const demoName = document.querySelector('.demo-name');
const demoNum = document.querySelector('.demo-number');
const demoExpMM = document.querySelector('.demo-exp-mm');
const demoExpYY = document.querySelector('.demo-exp-yy');
const demoCvc = document.querySelector('.demo-cvc');

const cardName = document.getElementById('cardholder');
const cardNum = document.getElementById('card-num');
const cardExpMM = document.getElementById('exp-month');
const cardExpYY = document.getElementById('exp-year');
const cardCvc = document.getElementById('cvc');

addEventListener('keyup', () => {
  if (cardNum.value) {
    let demoNumArray = Array.from(document.querySelector('.demo-number').innerText);
    demoNumArray = demoNumArray.filter(function (entry) { return entry.trim() != ''; });
    const cardNumArray = Array.from(cardNum.value);

    for (let i = 0; i < cardNumArray.length; i  ) {
      if (cardNumArray[i] !== undefined) {
        demoNum.innerText = demoNumArray.splice(demoNumArray[i], 1, cardNumArray[i]);
      } else {
        demoNumArray[i] = '0';
      }
    };
  };
});

<div >
      <div >
        <img src="https://raw.githubusercontent.com/meetjoewarren/learning-center/d05d53a12adeaa32e9b21bb033049fce570d460d/frontend-mentor/interactive-card-details-form-main/images/card-logo.svg" alt="Card Logo">
        <span >0000 0000 0000 0000</span>
        <span >Jane Appleseed</span>
        <span >
        <span >00</span>/<span >00</span>
      </div>
      </div>
      <div >
        <span >000</span>
      </div>
      <div >
        <div >
          <label for="cardholder">Cardholder Name</label>
          <input type="text" id="cardholder" name="cardholder" placeholder="e.g. Jane Appleseed" required>
          <label for="card-num">Card Number</label>
          <input type="text" id="card-num" name="card-num" placeholder="e.g. 1234 5678 9123 0000" maxlength="16" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
          <label for="exp-date" >Exp. Date (MM/YY)</label>
          <label for="cvc" >CVC</label><br >
          <input type="number" id="exp-month" name="exp-month" placeholder="MM" maxlength="2" style="margin-right: 10px;" required>
          <input type="number" id="exp-year" name="exp-year" placeholder="YY" minlength="2" maxlength="2" required>
          <input type="text" id="cvc" name="cvc" placeholder="e.g. 123" maxlength="3" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
          <button type="submit" >Confirm</button>
        </div>
    </div>
</div>

The code that is commented out in the JS section on GitHub updates the card except it erases the entire string on the demo card as it's typed

TIA for any assistance provided!

CodePudding user response：

you can use method padStart or padEnd to fill the cardNum value with 0 digit until the needed size

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

const demoNum = document.querySelector('.demo-number');
const cardNum = document.getElementById('card-num');

cardNum.addEventListener('keyup', () => {
  if (cardNum.value) {        
    demoNum.innerText = cardNum.value.padEnd(16, '0').replace(/(.{4})/g, '$1 ');
  };
});

.demo-number {
  border: solid blue;
}

#card-num {
  border: solid green;
}

<div >
  <div >
    <img src="https://raw.githubusercontent.com/meetjoewarren/learning-center/d05d53a12adeaa32e9b21bb033049fce570d460d/frontend-mentor/interactive-card-details-form-main/images/card-logo.svg" alt="Card Logo">
    <span >0000 0000 0000 0000</span>
    <span >Jane Appleseed</span>
    <span >
          <span >00</span>/<span >00</span>
  </div>
</div>
<div >
  <span >000</span>
</div>
<div >
  <div >
    <label for="cardholder">Cardholder Name</label>
    <input type="text" id="cardholder" name="cardholder" placeholder="e.g. Jane Appleseed" required>
    <label for="card-num">Card Number</label>
    <input type="text" id="card-num" name="card-num" placeholder="e.g. 1234 5678 9123 0000" maxlength="16" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
    <label for="exp-date" >Exp. Date (MM/YY)</label>
    <label for="cvc" >CVC</label><br>
    <input type="number" id="exp-month" name="exp-month" placeholder="MM" maxlength="2" style="margin-right: 10px;" required>
    <input type="number" id="exp-year" name="exp-year" placeholder="YY" minlength="2" maxlength="2" required>
    <input type="text" id="cvc" name="cvc" placeholder="e.g. 123" maxlength="3" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" required>
    <button type="submit" >Confirm</button>
  </div>
</div>
</div>