728x90
웹 화면에서 홀수를 선택하면 1부터 100까지의 홀수의 합를 구하고, 만약 짝수를 선택하면 1부터 100까지의 짝수의 합을 구하는 웹을 만들시오.(자바스크립트 사용)
<!DOCTYPE html>
<html>
<head>
<title>과제</title>
</head>
<body>
<h1>짝수의 합과 홀수의 합을 계산하는 계산기</h1>
<p>홀수를 선택하면 1부터 100까지의 홀수의 합를 구하고, 만약 짝수를 선택하면 1부터 100까지의 짝수의 합이 나옵니다. </p>
<button id="oddButton">홀수의 합</button>
<button id="evenButton">짝수의 합</button>
<p id="result">결과 : </p>
<script>
const oddButton = document.getElementById('oddButton');
const evenButton = document.getElementById('evenButton');
const resultElement = document.getElementById('result');
function calculateSum(start, end, step) {
let sum = 0;
for (let i = start; i <= end; i += step) {
sum += i;
}
return sum;
}
oddButton.addEventListener('click', function() {
const oddSum = calculateSum(1, 100, 2);
resultElement.textContent = `1 ~ 100사이에 짝수의 합 : ${oddSum}`;
});
evenButton.addEventListener('click', function() {
const evenSum = calculateSum(2, 100, 2);
resultElement.textContent = `1 ~ 100사이에 홀수의 합 : ${evenSum}`;
});
</script>
</body>
</html>728x90
'Programming Language > HTML & CSS & JavaScript' 카테고리의 다른 글
| [HTML & CSS & JavaScript] 계산기(+, -, *) 프로그램 실습 (0) | 2023.12.28 |
|---|---|
| [HTML & CSS & JavaScript] 자바스크립트 코어객체와 배열 (10주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] 자바스크립트 (식과 연산자, 조건문, 반복문, 함수) (9주차) (0) | 2023.12.28 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #2 (3주차) (0) | 2023.11.23 |
| [HTML & CSS & JavaScript] HTML5 기본 문서 만들기 #1 (2주차) (0) | 2023.11.23 |
