freecodecamp 的一个项目，将其创建为电话亭以使其变得有趣。 目前卡住并困惑了好几天，为什么当我再次按下回车键（应该清除输入）时，if 语句（execTime === 1）不起作用。第一次输入有效，第二次输入无效。你认为问题出在哪里？是逻辑语句的顺序还是有更好的替代方法来编写逻辑？
const checkBtn = document.getElementById('check-btn');
const clearBtn = document.getElementById('clear-btn');
const resultDiv = document.getElementById('results-div');
const validatorText = document.getElementById('validator');
const userInput = document.getElementById('user-input');
const buttons = document.querySelectorAll('.numbers button');
let execTime = 0;
function validator() {
const input = userInput.value.trim();
const countryCode = '^(1\\s?)?';
const areaCode = '(\\([0-9]{3}\\)|[0-9]{3})';
const spacesDashes = '[\\s\\-]?';
const phoneNumber = '[0-9]{3}[\\s\\-]?[0-9]{4}$';
const phoneRegex = new RegExp(`${countryCode}${areaCode}${spacesDashes}${phoneNumber}`)
if (!input) {
alert('Please provide a phone number');
return
}
if (execTime === 1) {
clearFields();
return;
}
validatorText.textContent = `${phoneRegex.test(input) ? 'Valid' : 'Invalid'} US number:`;
userInput.classList.toggle('hidden');
resultDiv.innerHTML = `<p>${input}</p>`;
execTime = 1;
}
function clearFields() {
execTime = 0;
const input = userInput.value.trim();
if (!input) {
return;
}
userInput.value = '';
userInput.classList.remove('hidden')
validatorText.textContent = 'ENTER A PHONE NUMBER:';
resultDiv.innerHTML = '';
}
userInput.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
if (execTime === 1) {
clearBtn.classList.add('active');
clearFields();
setTimeout(() => clearBtn.classList.remove('active'), 100);
spaceEnter = 0;
return;
} else {
checkBtn.classList.add('active');
validator();
setTimeout(() => checkBtn.classList.remove('active'), 100);
spaceEnter++;
}
}
});
checkBtn.addEventListener('click', validator);
clearBtn.addEventListener('click', clearFields);
这是 UI
<!DOCTYPE html>
<html>
<head lang="en">
<title>American Telephone Number Validator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Doto:wght@900&display=swap" rel="stylesheet">
</head>
<body>
<div class="head-container">
<p>AMERICAN TELEPHONE NUMBER VALIDATOR</p>
</div>
<div class="main-container">
<div class="phone-container">
<div class="phone"></div>
<div class="top"></div>
<div class="top2"></div>
<div class="top3"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
<div class="column-container">
<div class="display-container">
<div class="screen">
<p id="validator">ENTER A PHONE NUMBER:</p>
<input id="user-input">
<div id="results-div">
</div>
</div>
</div>
<div class="digits-container">
<div class="keypad">
<div class="upper-keypad">
<button id="check-btn">Check</button>
<button id="clear-btn">Clear</button>
</div>
<div class="numbers">
<div class="keys">
<button onclick="userInput.value += '1'">
<p class="up">.,@</p><p class="down" value="1">1</p>
</button>
<button onclick="userInput.value += '2'">
<p class="up">abc</p><p class="down" value="2">2</p>
</button>
<button onclick="userInput.value += '3'">
<p class="up">def</p><p class="down" value="3">3</p>
</button>
</div>
<div class="keys">
<button onclick="userInput.value += '4'">
<p class="up">ghi</p><p class="down" value="4">4</p>
</button>
<button onclick="userInput.value += '5'">
<p class="up">jkl</p><p class="down" value="5">5</p>
</button>
<button onclick="userInput.value += '6'">
<p class="up">mno</p><p class="down" value="6">6</p>
</button>
</div>
<div class="keys">
<button onclick="userInput.value += '7'">
<p class="up">pqrs</p><p class="down" value="7">7</p>
</button>
<button onclick="userInput.value += '8'">
<p class="up">tuv</p><p class="down" value="8">8</p>
</button>
<button onclick="userInput.value += '9'">
<p class="up">wxyz</p><p class="down" value="9">9</p>
</button>
</div>
<div class="keys">
<button class="down" value="*" onclick="userInput.value += '*'">*</button>
<button onclick="userInput.value += '0'">
<p class="up">_</p><p class="down" value="0">0</p>
</button>
<button class="down" value="#" onclick="userInput.value += '#'">#</button>
</div>
</div>
</div>
</div>
<div class="coin-container">
<div class="dot"></div>
<div class="coin-return"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
我希望当我再次按回车键时它会清除输入。要使 if (execTime === 1) 调用clearFields 函数。
通用汽车，
逻辑很好并且有效，该错误是由于 checkBtn 和clearBtn 变量未初始化所致，为此只需将它们添加到 script.js 的顶部即可：
const checkBtn = document.getElementById('check-btn')
const clearBtn = document.getElementById('clear-btn')