Scenario: JavaScript 학습도중, 계산기를 만들어보고자함


Solution: 하다보니 가장 막혔던 부분은, form태그의 name 속성 이었다. 원래는 action이나 id 속성만 줘봤는데,

 폼 테그에 text를 접근하려면 Form에 Name을 부여해서 접근할 수 있어야됨.




Ex: 완성 예시(링크 접근후 Runs 클릭)

http://www.w3schools.com/code/tryit.asp?filename=FCHYBFKWWWPO



  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Calculation</title>
  6. <style>
  7. legend {
  8. }
  9. p{
  10.     height: 20px;
  11. }
  12. fieldset{
  13.     width: 150px;
  14. }
  15.  
  16. #calc {
  17. }
  18.  
  19. #calc input[type=button] {
  20.     border: thin 1px ;
  21.     width: 25px;
  22.     text-align: center;
  23.     border-color:  #1ad1ff;
  24. }
  25.  
  26. #win {
  27.     width: 145px;
  28.     background-color: #b3f0ff;
  29.     border: none;
  30. }
  31. </style>
  32. <script>
  33. function cal(num){
  34.     myform.win.value += num;
  35.     console.log(num);
  36. }  
  37.  
  38. function answer(){
  39.     try{
  40.         myform.win.value = eval(document.myform.win.value);
  41.     }catch(e){alert('잘못된 연산오류 ㅋ')}
  42. }
  43.  
  44. function clearcal(){
  45.     myform.win.value = "";
  46. }
  47.  
  48. </script>
  49. </head>
  50. <body>
  51. <!--    맨처음에 폼테그는 무조건 action만 써봐서 착각함, 이곳에 네임속성을써줘야 자바스크립트에서 텍스트뷰에 값입력해줌 -->
  52.     <form name="myform" id="calc">
  53.         <fieldset >
  54.             <p><input type="text" id="win"> </p>
  55.            
  56.             <p>
  57.             <input type="button" value="1" onclick="cal('1')">
  58.             <input type="button" value="2" onclick="cal('2')">
  59.             <input type="button" value="3" onclick="cal('3')">
  60.             <input type="button" value="4" onclick="cal('4')">
  61.             <input type="button" value="5" onclick="cal('5')">
  62.             </p>
  63.             <p>
  64.             <input type="button" value="6" onclick="cal('6')">
  65.             <input type="button" value="7" onclick="cal('7')">
  66.             <input type="button" value="8" onclick="cal('8')">
  67.             <input type="button" value="9" onclick="cal('9')">
  68.             <input type="button" value="0" onclick="cal('10')">
  69.             </p>
  70.             <p>
  71.             <input type="button" value="/" onclick="cal('/')">
  72.             <input type="button" value="*" onclick="cal('*')">
  73.             <input type="button" value="-" onclick="cal('-')">
  74.             <input type="button" value="+" onclick="cal('+')">
  75.             <input type="button" value="=" onclick="answer()">
  76.             </p>
  77.             <p>
  78.             <input type="button" value="C" onclick="clearcal()">
  79.             </p>
  80.         </fieldset>
  81.     </form>
  82. </body>
  83. </html>




저작자표시 비영리 변경금지

'To be Developer > WEB' 카테고리의 다른 글

[jQuery]공부했던 기본 셀렉터 예제 모음  (0) 2017.02.14
[JavaScript]DOM객체 및 mouseover mouseout 을 활용하여 동적 버튼 만들기  (0) 2017.02.09
[JavaScript][펌]유용한 Array 메소드들  (0) 2017.02.07
[JavaScript]Form태그와 자바스크립트 함수 사용 시 반응 없음 문제관련  (1) 2017.02.07
[Web개발자되기][스크랩]사수가 없다는 분들에게  (0) 2017.01.18

+ Recent posts

티스토리툴바