사용자에게 번호를 묻는 자바 스크립트 프로그램을 만들려고합니다. 사용자가 21보다 작은 숫자를 입력하면 탄산 음료 이미지가 표시됩니다. 숫자가 21 이상이면 이미지는 맥주입니다. 페이지가로드 될 때 표시되는 막대 이미지가 있습니다. 코드에서 음수와 숫자가 아닌 것은 허용되지 않습니다. 이 코드에서 며칠 동안 작업했으며 코드가 실행됩니다. 내가 가진 유일한 문제는 모든 입력이 유효하지 않은 항목이라는 것입니다. 해결책을 찾아 보았지만 어떻게해야할지 모르겠습니다. 나는 자바 스크립트를 처음 사용하며 어떤 도움을 주시면 감사하겠습니다.
다음은 내가 사용중인 자바 스크립트입니다.
function start()
{
let button1 = document.getElementById("button1");
button1.onclick = toggleContent;
}
function toggleContent()
{
let number = document.getElementById('number');
let liquid = document.getElementById('Bar');
if parseInt(number <= 20)
{
liquid.src = 'assets/Soda.png';
liquid.alt = 'Spicy water';
}
else if (number >= 21)
{
liquid.src = 'assets/Beer.png';
liquid.alt = 'Angry Juice';
}
else if (isNaN(number) || number < 0)
{
alert("Invalid Entry. Enter a Number.")
}
}
window.onload = start;
다음은 함께 제공되는 HTML 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ID Check?</title>
<script src="scripts/pt2script.js"></script>
</head>
<body>
<img id="Bar" src="assets/barimage.png" alt="Image of a Bar Sign.">
<p>Enter a number into the text box.</p>
<input type="text" id="number" value="Enter a number...">
<button onclick="toggleContent()" id="button1">Submit</button>
</body>
</html>
입력에서 값을 가져 와서 단항 더하기+ 를 사용하여 숫자로 변환해야합니다 .
function start() {
let button1 = document.getElementById("button1");
button1.onclick = toggleContent;
}
function toggleContent() {
let number = +document.getElementById('number').value; // take value as a number
let liquid = document.getElementById('Bar');
if (isNaN(number) || number < 0) { // move exit condition to top and exit early
alert("Invalid Entry. Enter a Number.")
return;
}
if (number <= 20) { // condition without parseint
liquid.src = 'assets/Soda.png';
liquid.alt = 'Spicy water';
} else { // no need for another check
liquid.src = 'assets/Beer.png';
liquid.alt = 'Angry Juice';
}
}
window.onload = start;<img id="Bar" src="assets/barimage.png" alt="Image of a Bar Sign.">
<p>Enter a number into the text box.</p>
<input type="text" id="number" placeholder="Enter a number..."><!-- use placeholder -->
<button onclick="toggleContent()" id="button1">Submit</button>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다