DOM 1
숫자키를 누르면 하단의 박스(div)안에 이미지를 생성하시오.
상단 숫자키 사용 가능
우측 숫자키패드 사용 가능<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { border: 1px solid black; padding: 20px; min-height: 146px; } </style> </head> <body> <div id="box"></div> <script> var box = document.getElementById('box'); window.onkeydown = function() { if (event.keyCode >= 48 && event.keyCode <= 57){ box.innerHTML += "<img src='images/" + (event.keyCode - 48) + ".png'>"; } else if ( event.keyCode >=96 && event.keyCode <= 105) { box.innerHTML += "<img src='images/" + (event.keyCode - 96) + ".png'>"; } }; </script> </body> </html>
DOM 2
색상과 이름을 입력하면 테이블에 추가하시오.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { color: #666; } fieldset { width: 200px; } fieldset > div { margin: 5px; } #tbl { border: 1px solid gray; border-collapse: collapse; margin-top: 20px; width: 400px; color: #777; } #tbl td { border: 1px solid gray; padding: 4px 10px; text-align: center; } #tbl td:nth-child(1) { width: 150px; } </style> </head> <body> <h1>테이블</h1> <fieldset> <legend>색상 입력</legend> <div><label>색상 : </label><input type="color" id="txtColor"></div> <div><label>이름 : </label><input type="text" id="txtName" size="15"></div> <div><input type="button" value="추가하기" id="btnAdd"></div> </fieldset> <table id="tbl"> <thead> <tr> <th>색상명</th> <th>미리보기</th> </tr> </thead> <tbody id="tbody"> <tr> <td>노랑</td> <td bgColor="#FFFF00">#FFF00</td> </tr> <tr> <td>풀색</td> <td bgColor="#ACEF12">#ACEF12</td> </tr> </tbody> </table> <script> var txtColor = document.getElementById('txtColor'); var txtName = document.getElementById('txtName'); var btnAdd = document.getElementById('btnAdd'); var tbody = document.getElementById('tbody'); btnAdd.onclick = function() { var row = "<tr>"; row += "<td>"; row += txtName.value; row += "</td>"; row += "<td bgColor='" + txtColor.value + "''>"; row += txtColor.value; row += "</td>"; row += "</tr>"; tbody.innerHTML += row; // 색상 추가 후 입력 양식을 초기화 txtColor.value = "#000"; txtName.value = ""; }; // 색상 바뀌면 이름 텍스트 박스 포커스 txtColor.onchange = function() { txtName.focus(); } // 이름 텍스트 박스 엔터키 이벤트 txtName.onkeydown = function() { if (event.keyCode == 13) { btnAdd.click(); //버튼 클릭 > 에뮬레이터 함수 } } </script> </body> </html>
