점수 :
<!DOCTYPE html>
<html lang="en">
<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>Map 예제</title>
<!-- input : 과목, 점수를 받기
추가버튼 : map에 추가
출력버튼 : map을 출력 (ul-li로 출력)
결과버튼 : 합계, 평균, 합격여부 (60이상 합격) 출력-->
</head>
<body>
과목 : <input type="text" name="" id="sub"> <br>
점수 : <input type="text" name="" id="score"> <br> <hr>
<button type="button" id="add">추가버튼</button>
<button type="button" id="print">출력버튼</button>
<button type="button" onclick="result();">결과버튼</button>
<!-- 출력버튼 출력 -->
<h3>
<ul id="print1"></ul>
</h3>
<!-- 결과버튼 출력 -->
<h3 id="result1"></h3>
<script>
const myScore = new Map();
// 추가버튼
document.getElementById('add').addEventListener('click',function(){
let sub = document.getElementById('sub').value;
let score = parseInt(document.getElementById('score').value);
myScore.set(sub, score);
document.getElementById('print1').innerText = `${sub} : ${score}점 추가되었습니다`;
})
// 출력버튼
document.getElementById('print').addEventListener('click',()=>{
let str =" ";
for(const k of myScore.entries()){
str += `<li> ${k}점 </li>`;
}
// myScore.forEach(function(value, key){
// str += `<li>과목: ${key} / 점수: ${value} </li>`;
// })
document.getElementById('print1').innerHTML = str;
})
// 결과버튼
function result() {
let sum = 0;
let avg = 0;
let pass = "";
// 합계
for(const v of myScore.values()){
sum += v;
}
// 평균
avg = (sum / myScore.size).toFixed(2);
// 합격여부
if(avg >= 60){
pass = '합격';
}else{
pass = '불합격';
}
// pass= (avg>=60)? '합격' : '불합격';
document.getElementById('result1').innerText = `합계: ${sum}, 평균: ${avg}, 합격여부: ${pass}`;
}
</script>
</body>
</html>
<
body>
<!--
input 2개 생성 => 과목, 점수
추가버튼 => map에 추가
출력버튼 => map을 출력 => ul태그안에 li로 추가
결과버튼 => 합계, 평균, 합격여부 (60이상이면 합격) => h3
-->
<form action="">
과목 : <input type="text" id="sub"> <br>
점수 : <input type="text" id="num"> <br>
<button type="button" onclick="add();">추가</button>
<button type="button" id="printBtn">출력</button>
<button type="button" id="totBtn">결과</button>
</form>
<ul id="result"></ul>
<h3 id="tot"></h3>
<script>
const sub = document.getElementById('sub');
const num = document.getElementById('num');
const result = document.getElementById('result');
const tot = document.getElementById('tot');
const printBtn = document.getElementById('printBtn');
const totBtn = document.getElementById('totBtn');
const myMap = new Map();
let sum=0;
let avg=0;
let pass=''; //합격여부
function add(){
let subVal = sub.value;
let numVal = Number(num.value); // 숫자로 변환
myMap.set(subVal, numVal);
sum+=numVal;
console.log(myMap);
console.log(sum);
}
printBtn.addEventListener('click',function(){
let str=''; //결과 누적 변수
myMap.forEach(function(v, k){
str += `<li> ${k}:${v} </li>`;
})
result.innerHTML = str;
})
totBtn.addEventListener('click', function(){
avg = (sum / myMap.size);
pass = (avg>=60)? '합격':'불합격';
tot.innerText= `과목의 점수합계: ${sum}, 평균:${avg.toFixed(2)}, 합격여부:${pass}`;
})
</script>
</body>
'JS > JS 수업분' 카테고리의 다른 글
| [JS] day11_classEx (입금, 출금, 송금) (0) | 2023.04.18 |
|---|---|
| [JS] day11_class, 객체, 생성자 (0) | 2023.04.18 |
| [JS] day11_count생성 (더하기 버튼 : +1 / 빼기버튼 : -1) (0) | 2023.04.18 |
| [JS] day11_try~catch (0) | 2023.04.18 |
| [JS] day11_map (0) | 2023.04.18 |