Created
March 25, 2024 18:39
-
-
Save golbin/d0367caa7f3f9561db8618536fef772f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>JavaScript Sample</title> | |
| <script> | |
| window.onload = function () { | |
| // DOM 조작하기 | |
| let statusNum = 1; | |
| const myParagraph = document.getElementById("my-paragraph"); | |
| myParagraph.innerHTML = "This is a new paragraph."; | |
| myParagraph.style.color = "red"; | |
| // 이벤트 처리 방법 | |
| const addButton = document.getElementById("add-button"); | |
| addButton.addEventListener("click", function () { | |
| const actionStatus = document.getElementById("action-status"); | |
| let clickStatus = document.createElement("div"); | |
| clickStatus.setAttribute("class", "status"); | |
| clickStatus.innerHTML = String(statusNum) + ": Button clicked!"; | |
| statusNum += 1; | |
| actionStatus.appendChild(clickStatus); | |
| }); | |
| const delButton = document.getElementById("del-button"); | |
| delButton.addEventListener("click", function () { | |
| const status = document.getElementsByClassName("status"); | |
| status[status.length - 1].remove(); | |
| statusNum -= 1; | |
| }); | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <h1>JavaScript Sample</h1> | |
| <p id="my-paragraph">This is a sample paragraph.</p> | |
| <button id="add-button">Add Status</button> | |
| <button id="del-button">Delete Status</button> | |
| <p id="action-status">Action Status:</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment