<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>Document</title>
<script>
function sum() {
// first = parseInt(document.getElementById('num1').value)
// sec = parseInt(document.getElementById('num2').value)
first = eval(document.getElementById('num1').value)
sec = eval(document.getElementById('num2').value)
document.getElementById('result').value
= first + sec;
}
function total() {
min = eval(document.getElementById('num1').value) //10
max = eval(document.getElementById('num2').value) //5
hap = 0;
if (min > max) {
tmp = min;
min = max;
max = tmp;
}
for (i = min; i <= max; i++) {
hap += i;
}
document.getElementById('result').value
= hap;
}
// 배경색 변경 1번방법
function changeColor(color, str) {
alert(str + "색")
document.bgColor = color;
}
// 배경색 변경 2번방법
function chColor(obj) {
document.bgColor = obj.value;
}
//
count = 1;
function hello() {
if (count % 2 == 1) {
alert(count + ' : 안녕하세요')
} else {
alert(count + ' : 안녕히 가세요')
}
count++;
}
</script>
</head><body>
첫번째 수 : <input type="text" id="num1" size="10" /><br />
두번째 수 : <input type="text" id="num2" size="10" /><br />
결과 : <input type="text" id="result" size="10" /><br />
<input type="button" value="합계" onclick="sum()" />
<input type="button" value="작은수에서 큰수합계" onclick="total()" />
<hr>
<!-- 배경색 변경 1번방법 -->
<input type="button" value="노랑" onclick="changeColor('yellow','노랑')">
<input type="button" value="빨강" onclick="changeColor('red','빨강')">
<input type="button" value="파랑" onclick="changeColor('blue','파랑')">
<input type="button" value="초록" onclick="changeColor('green','초록')">
<hr>
<!-- 배경색 변경 2번방법(자기자신 객체 this 활용) -->
<input type="button" value="yellow" onclick="chColor(this)">
<input type="button" value="red" onclick="chColor(this)">
<input type="button" value="blue" onclick="chColor(this)">
<input type="button" value="green" onclick="chColor(this)">
<hr>
<!-- 인사하기 -->
<input type="button" value="인사하기" onclick="hello()">
</body>
안녕하세요!!