반별 성적 관리 프로그램 (간이 프로젝트)
1. 학생 인원수에 맞게 입력칸을 자동으로 생성한다.
2. 생성된 입력칸에 점수를 입력하고 (여러 과목)
3. 총점, 평균 버튼으로 누적점수와 반평균을 구하여 출력한다.
4. html 요소를 이쁘게 또는 멋지게 꾸민다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>간이 프로젝트</title>
</head>
<body>
<h2>반별 성적 관리 프로그램</h2>
<br>
<p>학생수 : <input type="number" id="n"><button id="mkp">입력칸 생성</button></p>
<div id="sp"></div><br>
<button id="sum">계산</button><br>
<p id="sum_n"></p>
<p id="ave_n"></p>
</body>
<script>
const h_n = document.querySelector("#n");
const b = document.querySelector("#mkp");
const space = document.querySelector("#sp")
let hn = 0;
b.addEventListener("click", function () {
let hn = h_n.value;
// console.log(hn);
let str = "";
for (let i = 0; i < hn; i++) {
str += `<input type="number" class="a">`;
}
space.innerHTML = str;
});
let sum_t = 0;
const T = document.querySelector("#sum");
const n = document.querySelector("#sum_n");
const a_w = document.querySelector("#ave_n");
T.addEventListener("click", function(){
sum_t = 0;
const inputs = document.querySelectorAll(".a");
for (let i = 0; i < inputs.length; i++) {
sum_t += Number(inputs[i].value);
console.log(sum_t);
}
let ave_t = sum_t/inputs.length;
console.log(ave_t);
n.innerHTML = `총 합은 ${sum_t}입니다.`;
a_w.innerHTML = `평균은 ${ave_t}입니다.`;
});
</script>
</html>'공부기록 > 실습' 카테고리의 다른 글
| 3월 23일 (1) 웹 사이트 따라서 만들기 (0) | 2023.03.23 |
|---|---|
| 3월 15일 야구 전광판 만들기 (0) | 2023.03.16 |
| 연습 문제 2. 윤년 계산기 만들기 (0) | 2023.03.08 |
| 연습 문제 1. 합격 여부 계산하기 (0) | 2023.03.08 |
| 사이트 그대로 따라 만들기(롯데월드 메인 페이지-css) (0) | 2023.03.04 |
