728x90
반응형
실행 화면
| 초기 화면 | 입력 후 화면 |
 |
 |
<자바 스크립트 코드>
<!DOCTYPE html>
<html><head><meta charset="UTF-8">
<title>x</title>
</head>
<body>
<h3>라면 끓이는 순서</h3>
<hr>
<ol type="A" style="background-color: yellowgreen" onclick="add()" id="rameon">
<li>물 끓임.</li>
</ol>
<script>
function add() {
var text = prompt("라면을 끓이는 순서를 입력하라");
if(text == null || text == "") return;
var newNode = document.createElement("li");
newNode.innerHTML = text;
document.getElementById("rameon").appendChild(newNode);
}
</script></body></html>
1. 복습
- 라면 리스트.. ol 에서 onclick = "add(this)" / add(obj) { } 로 바꿀 수 있음.
>> 리스트 추가할 때 ol id 찾는 게 아니라 obj.appendChild(newNode) 가능.
'웹개발' 카테고리의 다른 글
| [명품 웹 프로그래밍] 9장 예제 9-15, new Image()로 이미지 로딩 (0) | 2021.12.12 |
|---|---|
| [명품 웹 프로그래밍] 9장 예제 9-14, onload로 이미지 크기 알아내기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 7, 클릭할 때마다 그림 회전 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 5, 카드 넘기기 (0) | 2021.12.11 |
| [명품 웹 프로그래밍] 8장 실습문제 3, 빈 칸 채우기 / 숨기기 (0) | 2021.12.11 |
