function 的某些部分在按键事件监听器中不起作用

Question

I have a problem with not working part of a JavaScript code under some specific conditions. I have a task to do some simple credit card validation. If a card number starts with a specific number I need to show a specific card icon like Visa or Mastercard. At the start 3 of them are shown and as I'm typing card number 2 of them should disappear and if the number has the correct length for that specific card type the remaining one should turn green. The problem is when I try putting it in the eventListener for keypress nothing happens but when I try putting it outside the function everything works. For example:

cardNumber.addEventListener("keypress", function(){
    if(cardNumber.value.startsWith("4")){
        cards[0].style.color = "green"
    }
})

This doesn't work, the card doesn't turn green when I'm typing number 4 but if I try to just console log something when I type number 4 then it's shown in the console, so the event listener works but for some strange reason the styling doesn't. But if I just try doing

cards[0].style.color = "green"

outside of the function just to see if I'm doing then the icon turns green normally.

JavaScript:

const cardNumber = document.getElementById("cardNumber");
const cards = document.querySelectorAll("i");

cardNumber.addEventListener("keypress", function(){
    if(cardNumber.value.startsWith("4")){
        cards[0].style.color = "green"
        console.log("YES");
    }
})

HTML:

<main class="container">
  <div class="card mt-4">
    <div class="card-body">
      <form>
        <div class="form-group">
          <label for="cardNumber">Credit card number</label>
          <div class="input-group">
            <input type="text" class="form-control" id="cardNumber">
            <div class="input-group-append">
              <span class="input-group-text text-muted" style="font-size: 1.5rem" id="type">
                <i class="fab fa-cc-visa mx-1" id="visa-icon"></i>
                <i class="fab fa-cc-amex mx-1" id="amex-icon"></i>
                <i class="fab fa-cc-mastercard mx-1" id="mastercard-icon"></i>
              </span>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</main>

I can't change anything in the HTML - it's a JavaScript task.

Edit: Moving the constant variables containing card icons inside the eventListener worked.

Answer 1

You can try waiting till page is fully loaded, or inserting your code below the elements you wish to modify. DOM state could be messing with you.

window.onload = (event) => {
  console.log('Code can go here');
};

Answer 2

Change the event you listen to input.

cardNumber.addEventListener("input", function(){

The problem with keypress is that the input is modified just after the event is triggered.

 const cardNumber = document.getElementById("cardNumber"); const cards = document.querySelectorAll("i"); cardNumber.addEventListener("input", function(e){ if(cardNumber.value.startsWith("4")){ cards[0].style.color = "green" } })

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <main class="container"> <div class="card mt-4"> <div class="card-body"> <form> <div class="form-group"> <label for="cardNumber">Credit card number</label> <div class="input-group"> <input type="text" class="form-control" id="cardNumber"> <div class="input-group-append"> <span class="input-group-text text-muted" style="font-size: 1.5rem" id="type"> <i class="fab fa-cc-visa mx-1" id="visa-icon"></i> <i class="fab fa-cc-amex mx-1" id="amex-icon"></i> <i class="fab fa-cc-mastercard mx-1" id="mastercard-icon"></i> </span> </div> </div> </div> </form> </div> </div> </main>