JS/[문제해결]

[국비] for문 활용_문자열 누적

줌인. 2024. 5. 25. 15:42

[문제 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