또자의 코딩교실

[JavaScript] Form 태그를 활용한 색깔 바꾸기 예제 본문

코딩공부/java

[JavaScript] Form 태그를 활용한 색깔 바꾸기 예제

또자자 2022. 5. 12. 00:53

  • 문제 해결 포인트
  • 동적 반응을 위해 javascript를 사용한다.
  • input값을 받아 form 태그로 전송할 줄 안다.

정답 코드

 

<!DOCTYPE html>
<html>
    <head>
        <title>컬러 테이블</title>
    </head>
    <style>
        table {
     width:500px ;
     height: 300px;
     
        }
        th, td {
     text-align: center;
        }
    </style>
<body>
    
    <table id="myTable" border="1">
        <tr>
         <td id="11">1-1</td>
         <td id="12">1-2</td>
         <td id="13">1-3</td>
         <td id="14">1-4</td>
         <td id="15">1-5</td>
     </tr><tr>
         <td id="21">2-1</td>
         <td id="22">2-2</td>
         <td id="23">2-3</td>
         <td id="24">2-4</td>
         <td id="25">2-5</td>
     </tr><tr>
         <td id="31">3-1</td>
         <td id="32">3-2</td>
         <td id="33">3-3</td>
         <td id="34">3-4</td>
         <td id="35">3-5</td>
     </tr>
         </table>
     
     <form id="form">
    <!-- form으로 id 식별은 name, 최종 전달 타입은 btn아닌 submit -->
     </br>     
     세로 <input id="op1" name="op1" type="text"  placeholder="변경 칸 세로 좌표 (1~3)" min="1" max="3"  /><br>
     가로 <input id="op2" name="op2" type="text"  placeholder="변경 칸 가로 좌표 (1~5)" min="1" max="5"  /><br>
     컬러 <input id="op3" name="op3" type="text" placeholder="변경할 색 입력"/><br>
     <input type="submit" value="컬러적용" />

     </form>    
    </br>
</body>
</html>
<!-- JavaScript -->
    
    <script type="text/javascript">
        document.getElementById('form').onsubmit = function(){
            //form으로 제출된 값 받아오기
            var input_op1 = document.getElementById('op1')
            var input_op2 = document.getElementById('op2')
            var input_op3 = document.getElementById('op3')
            console.log(input_op1.value)
            console.log(input_op2.value)
            console.log(input_op3.value)
            
            const change_spot = input_op1.value + input_op2.value 
            const change_color = input_op3.value
            //const = const 선언은 블록 범위의 상수를 선언. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없음
            console.log(change_spot)
            console.log(change_color)

            document.getElementById(change_spot).style.backgroundColor = change_color;


            return false; 
            //form은 제출이벤트가 발생하며, 제출한 데이터를 서버 프로그램에 보내는 것을 
            // 목적으로 만드는 요소이다. 때문에 제출이 되고나면, 서버 프로그램 
            // 이후 결과를 반영하기 위한 내부적인 절차가 진행된다. 
            // 그런데 지금 우리한텐 서버 프로그램이 없다. 
            // 이때 return false를 해주게 되면, 서버프로그램 호출까지 안 가고 멈춘다.
        }

        
    </script>
저작자표시

'코딩공부 > java' 카테고리의 다른 글

OOME(Out of Memory Error)란? + 대중적인 해결법  (0) 2022.03.25
Garbage Collection(GC), Heap Memory의 개념  (0) 2022.03.22
자주쓰는 헷갈리는 형변환 함수들(toString, getText, valueof)  (0) 2021.11.30
배열 홀짝 수박게임 예제  (0) 2021.09.14
정수의 약수를 구하는 문제  (0) 2021.09.14
'코딩공부/java' Related Articles more
Comments