728x90
반응형
실행 화면
| 초기 화면 | 계산 결과 |
 |
 |
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body>
<h3>계산</h3>
<hr>
<input type="text" id="first"> <input type="text" id="second">
<br>답은 <span id="result"></span>
<br><button onclick="plus()">더하기</button>
<script>
function plus() {
var first = document.getElementById("first");
var second = document.getElementById("second");
var result = document.getElementById("result");
result.innerHTML = parseInt(first.value) + parseInt(second.value);
}
</script>
</body>
</html>
2. JQuery 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>계산</title>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<input type="text" id="first"> <input type="text" id="second">
<br>답은 <span id="result"></span>
<br><button id="btn">더하기</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var first = $("#first").val();
var second = $("#second").val();
$("#result").text(parseInt(first) + parseInt(second));
});
});
</script>
</body>
</html>'웹개발 > jQuery' 카테고리의 다른 글
| [jQuery] 클래스 조작, hover (0) | 2021.12.13 |
|---|---|
| [jQuery] 화면 그라데이션 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 체크 박스 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 라디오 버튼 (0) | 2021.12.13 |
728x90
반응형
실행 화면
| 초기 화면 | 계산 결과 |
|
|
1. 자바스크립트 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body>
<h3>계산</h3>
<hr>
<input type="text" id="first"> <input type="text" id="second">
<br>답은 <span id="result"></span>
<br><button onclick="plus()">더하기</button>
<script>
function plus() {
var first = document.getElementById("first");
var second = document.getElementById("second");
var result = document.getElementById("result");
result.innerHTML = parseInt(first.value) + parseInt(second.value);
}
</script>
</body>
</html>
2. JQuery 코드
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>계산</title>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<input type="text" id="first"> <input type="text" id="second">
<br>답은 <span id="result"></span>
<br><button id="btn">더하기</button>
<script>
$(document).ready(function(){
$("#btn").click(function(){
var first = $("#first").val();
var second = $("#second").val();
$("#result").text(parseInt(first) + parseInt(second));
});
});
</script>
</body>
</html>'웹개발 > jQuery' 카테고리의 다른 글
| [jQuery] 클래스 조작, hover (0) | 2021.12.13 |
|---|---|
| [jQuery] 화면 그라데이션 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 체크 박스 (0) | 2021.12.13 |
| [jQuery] 처음배우는 Javascript_jQuery, 라디오 버튼 (0) | 2021.12.13 |
