【发布时间】：2021-04-24 16:48:38
【问题描述】：
我遇到了在某些特定条件下无法运行部分 JavaScript 代码的问题。我的任务是做一些简单的信用卡验证。如果卡号以特定数字开头，我需要显示特定的卡图标，例如 Visa 或 Mastercard。在开始时显示了其中的 3 个，当我输入卡号时，其中的 2 个应该消失，如果该数字具有该特定卡类型的正确长度，则其余的应该变为绿色。问题是当我尝试将它放在 eventListener for keypress 时没有任何反应，但是当我尝试将它放在函数之外时一切正常。例如：
cardNumber.addEventListener("keypress", function(){
if(cardNumber.value.startsWith("4")){
cards[0].style.color = "green"
}
})
这不起作用，当我输入数字 4 时卡片不会变成绿色，但是如果我尝试在输入数字 4 时仅在控制台记录某些内容，那么它会显示在控制台中，因此事件侦听器可以工作，但是出于某种奇怪的原因，样式没有。但如果我只是尝试做
cards[0].style.color = "green"
在函数之外只是为了看看我是否在做然后图标会正常变为绿色。
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>
我无法更改 HTML 中的任何内容 - 这是一项 JavaScript 任务。
编辑：在 eventListener 中移动包含卡片图标的常量变量有效。
【问题讨论】：
-
尝试使用input 事件而不是按键。
-
也不起作用，但谢谢，我不知道该事件存在
-
我将代码转换为可运行的sn-p，但这确实有效。所以，我删除了它，它不会重现问题，只是留下了代码。我怀疑问题出在 JavaScript 代码何时执行 - 可能是在添加标志之前，所以
cards变量可能不包含您期望的信息。因此，您可能应该延迟该代码或使用事件委托。虽然，您可能只是在事件侦听器中移动const cards = document.querySelectorAll("i");。不知道 JS 的执行方式和位置，有点难以猜测。 -
@VLAZ 谢谢，将它移到 eventListener 中对我来说效果很好。非常感谢。
-
为什么在 eventListener 中移动卡片常量会使它起作用？卡片常量已经在 eventListener 的范围内。你确定你没有改变上面的其他东西吗？我已经复制了您的更改，但它对我不起作用。
标签： javascript html css reactjs sass