[문제 1]
- text 박스안에 출력할 list 개수 입력
- 클릭시 list 개수 출력
- 스크립트를 완성하세요
<body>
<input id="input" type="text">
<button onclick="addTxt()">CLICK</button>
<div>
<ul id="ul">
<!--li추가하기 innerHtml사용-->
</ul>
</div>
<script>
const input = document.getElementById("input");
const ul = document.getElementById("ul");
function addTxt() {
let sth = input.value;
let result = "";
for(let i=0; i<sth; i++) {//여기서 sth은 지정 개수를 의미한다.
result += "<li></li>" //result = result + 문자열;
}
//result값 응용
ul.innerHTML = result;
}
</script>
</body>
</html>
| 문제 인지 |
|
| 문자열 누적 | 문자열 누적 과정에서 반복문을 사용하는 방법에 대해 혼란을 겪음 - 특히, 문자열 누적과 반복문을 통해 원하는 결과를 얻는 과정에서 어려움을 겪음 |
| for 구문 | for 구문 내에서 innerhtml 사용시, 누적되는 것이 아닌 마지막 값만 입력되는 문제 인지 못함 - result 사용 여부에 대한 판단이 어려움 |
| result1 = result1; ⇒ i = +i result1 = (result1 + result1); ⇒ i = (i)+i; result1 = (result1 + result1 + result1); ⇒ i = (i+i)+i; |
|
| result = <li><li>; result = <li><li> + <li><li>; result = (<i><li> + <li><li>) + <li><li> |
|
728x90
'JS > [문제해결]' 카테고리의 다른 글
| [국비] 배열 및 반복문(for)과 이벤트 위임 결합_삭제 버튼 (0) | 2024.05.26 |
|---|---|
| [국비] 배열 및 반복문(for문)_체크 박스 동기화 (0) | 2024.05.25 |
| [국비] 조건문(if/else if) 및 반복문(for)문 활용_prompt 연산자, 분/초 출력 (0) | 2024.05.20 |