<!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>JS13.미션.html</title>
<script>
/*
function changeColor() {
var arrColor = ['#FC0', '#06F', '#FCF', '#CF0', '#FF0'];
var index = Math.floor(Math.random()*arrColor.length);
var element = document.getElementById('theBody');
element.style.backgroundColor = arrColor[index];
}
*/
function StudentScore(name, kor, eng, math) {
this.userName = name;
this.korScore = kor;
this.engScore = eng;
this.mathScore = math;
this.getScoreInfo = function() {
var str = '';
str = '이름: ' + this.userName + '<br>' + '국어: ' + this.korScore + '<br>' + '영어: ' + this.engScore + '<br>' +'수학: ' + this.mathScore + '<br>';
return str;
}
this.getScoreAvg = function() {
var avg = this.korScore + this.engScore + this.mathScore / 3;
return avg;
}
}
var kim = new StudentScore('김똘똘', 95, 85, 65);
function getScore() {
var str = kim.getScoreInfo();
console.log(str);
var element = document.getElementById('subjectScore');
element.innerHTML = str;
}
function getAvg() {
var avg = kim.getScoreAvg();
console.log(avg);
var element = document.getElementById('avgScore');
element.innerHTML = avg;
}
</script>
</head>
<body id="theBody">
<!--
<h3>[배경 색상 변경] 버튼을 클릭할 때마다 5개 색상이 변경되도록 구현하세요.</h3>
<button onclick="changeColor()">배경 색상 변경</button>
-->
<h3>[김군 성적 정보] 버튼을 클릭하면 국어, 영어, 수학 점수와 평균 점수가 출력되도록 구현하세요.(※ 객체 생성자 함수를 사용하세요)</h3>
<ul>
<li><button onclick="getScore()">과목 점수</button></li>
<li id="subjectScore"></li>
<li><button onclick="getAvg()">평균 점수</button></li>
<li id="avgScore"></li>
</ul>
</body>
</html>