문제1. 버튼 클릭시 자동으로 +, -, /, * 가 되게 해보세요.
목적1. parsetFloat();을 사용할 수 있다.
목적2. HTML 문서 객체의 value값에 접근할 수 있다.
답
<body>
<!-- 문제1. 버튼 클릭시 자동으로 +, -, /, * 가 되게 해보세요. -->
<!--
1. 입력할 수 있는 input요소를 만든다
2. +, - button을 만든다
3. button 클릭시 javascript가 실행될 수 있도록 함수를 만든다
-->
<input type="text" id="one" placeholder="숫자를 입력하세요."/>
<button onclick="plus();">+</button>
<button onclick="minus();">-</button>
<input type="text" id="two" placeholder="숫자를 입력하세요."/>
<strong>=</strong>
<input type="text" id="three" placeholder="숫자를 입력하세요."/>
<script>
/*
1. input#one의 value 값을 가지고 온다.
2. input#two의 value 값을 가지고 온다.
3. 갖고온 value 값들을 산술연산자로 계산한다.
4. 계산한 값을 input#three에 출력해준다.
*/
var plus=function(){
var a=document.querySelector("#one").value;
var b=document.querySelector("#two").value;
/*
input의 value 값은 문자열로 들어오기 때문에
parsetFloat();을 이용해 숫자열로 변경해주어야한다.
*/
var result= parseFloat(a)+parseFloat(b);
document.querySelector("#three").value=result;
};
var minus=function(){
var a=document.querySelector("#one").value;
var b=document.querySelector("#two").value;
/*
input의 value 값은 문자열로 들어오기 때문에 parsetFloat();로 숫자열로
*/
var result= parseFloat(a)-parseFloat(b);
document.querySelector("#three").value=result;
};
</script>
</body>'Javascript' 카테고리의 다른 글
| 달리는 캐릭터 만들기 (0) | 2019.11.05 |
|---|---|
| 그림을 사방으로 움직이고, 회전, 리셋 시켜 보기 (0) | 2019.11.05 |
| 입력된 내용 출력하기 (0) | 2019.11.05 |
| 카운트 올리기, 줄이기, 리셋 (0) | 2019.11.05 |
| javascript로 HTML 문서에 접근하고 contents변경해보기 (0) | 2019.11.05 |
