WEB Archive
[HTML] Javscript - document.getElementById() Id로 변수에 담아내고 연산해서 출력하기
universedevelope
2024. 8. 21. 14:23
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test016.html</title>
<style>
*
{
color: white;
font-style: italic;
font-weight: bold;
background-color: black;
}
form
{
font-size: 40px;
}
input.txtNum
{
width:120px;
height: 60px;
font-size: 30px
}
input.txtNumResult
{
width:120px;
height: 60px;
font-size: 30px
}
input:focus
{
background-color: tomato;
}
input:hover
{
background-color: yellow;
color: black;
}
input.btn
{
width: 140px;
height: 60px;
background-color: yellow;
color: black;
font-size: 30px;
}
input.btn:active
{
background-color: red;
color: black;
}
</style>
<script type="text/javascript">
/*
// 더하기
function addNum()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var reNum = document.getElementById("result");
reNum.value = num1+num2;
}
// 빼기
function subNum()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var reNum = document.getElementById("result");
reNum.value = num1-num2;
}
// 곱하기
function mulNum()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var reNum = document.getElementById("result");
reNum.value = num1*num2;
}
// 나누기
function divNum()
{
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var reNum = document.getElementById("result");
reNum.value = num1/num2;
}
*/
// -------------↑함수4개---------------- ↓함수1개
function test(obj)
{
// 매개변수 분기되는지 테스트
// alert(obj); 성공 //→ [object HTMLInputElement] 반환
// alert(obj.value); 더하기 / ~ 나누기
var vNum1 = document.getElementById("num1").value;
var vNum2 = document.getElementById("num2").value;
var vResult = 0;
if(obj.value == "더하기")
{
//alert("덧셈 연산 수행");
vResult = parseInt(vNum1) + parseInt(vNum2);
}
else if(obj.value == "빼기")
{
//alert("뺄셈 연산 수행");
vResult = parseInt(vNum1) - parseInt(vNum2);
}
else if (obj.value == "곱하기")
{
//alert("곱셈 연산 수행");
vResult = parseInt(vNum1) * parseInt(vNum2);
}
else if (obj.value == "나누기")
{
//alert("나눗셈 연산 수행");
vResult = parseInt(vNum1) / parseInt(vNum2);
}
// 결과 담기
document.getElementById("result").value = vResult;
}
</script>
</head>
<body>
<div>
<h1>자바스크립트 활용</h1>
<hr>
</div>
<div>
<p>사용자로부터 두 개의 정수를 입력받고</p>
<p>합, 차, 곱, 몫을 연산하여 연산 결과를 페이지에 출력할 수 있도록 한다.</p>
<p>HTML, CSS, Javascript를 활용하여 처리한다.</p>
<br><br><br>
</div>
<div>
<form>
정수1 <input type = "text" id = "num1" class = "txtNum">
정수2 <input type = "text" id = "num2" class = "txtNum">
<br>
<br>
<!-- <input type = "button" class = "btn" value = "더하기" onclick = addNum()> -->
<input type = "button" class = "btn" value = "더하기" onclick = "test(this)">
<!-- <input type = "button" class = "btn" value = "빼기" onclick = subNum()> -->
<input type = "button" class = "btn" value = "빼기" onclick = "test(this)">
<!-- <input type = "button" class = "btn" value = "곱하기" onclick = mulNum()> -->
<input type = "button" class = "btn" value = "곱하기" onclick = "test(this)">
<!-- <input type = "button" class = "btn" value = "나누기" onclick = divNum()> -->
<input type = "button" class = "btn" value = "나누기" onclick = "test(this)">
<br>
<br>
결과 <input type = "text" id="result" class="txtNumResult" disabled="disabled" >
<input type="reset" class="btn" value="취소">
</form>
</div>
</body>
</html>정수와 정수의 연산!
연산자들에 값을 부여해서 연산하는 함수를 만들어보았습니다.
728x90