버튼을 클릭할 때마다 10씩 증가하는 값을 만들려면 jQuery의 click() 메서드와 자바스크립트의 parseInt() 함수를 함께 사용하면 됩니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="add">10</div>
<div id="sequenceValue"></div>
<button id="addSequenceOf10">addValue10EachTimePressMe</button>
<script>
addValue = 0;
$("#addSequenceOf10").click(function() {
var actualValue = parseInt($("#add").html());
addValue =addValue+ actualValue;
$("#sequenceValue").html(addValue);
});
</script>
</body>
</html>실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 됩니다.
출력 결과
프로그램을 실행하면 다음과 같은 초기 화면이 나타납니다.
이제 버튼을 클릭해 보세요. 첫 번째 클릭에서는 10이 표시되고, 그다음부터는 20, 30, 40…N처럼 클릭할 때마다 값이 10씩 증가하는 것을 확인할 수 있습니다.
버튼을 한 번 더 클릭하면 아래와 같이 값이 계속 누적되어 증가합니다.
