[JavaScript] 사용자가 입력한 값을 배열에 차곡 차곡 담기

문제점

* 개구리 , ["개구리"] 는 확인이 되지만 뒤이은 바나나 새로운 배열에 담김 (즉, 값들이 연이어 이어지지 않음 )

나의 로직
        1. push()를 이용해 배열의 맨 뒤에 요소를 추가한다
        2. toString으로 하나의 문자열로 출력한다.

        * 값을 입력하고 입력 버튼을 누를 때 배열에 하나씩 담는 구문을 작성해보자
        * 값을 입력받는 변수 따로 받아야 할까?

전체코드

소요시간 30m

완성도 60%

        <fieldset>
            <legend>입력</legend>
            <input type="text" name="str" id="str"> <button onclick="test1();">입력</button>
        </fieldset>
    
        <script>
            function test1(){
                var str = document.getElementById("str").value;

                   var arr = [str];
                   arr.push("");

                console.log(str);
                console.log(arr);

            }
        </script>
        <br><br>
        
        <p style="border: 1px solid red ; width:500px ; height:20px;">이 부분에 정답이 출력 될 수 있도록 하세요</p>

        <button>출력</button>
        <br><br>

위의 코드의 문제점은 영원히 입력한 그 하나의 값만! 새로이 업데이트 되어서 콘솔창에 출력된다는 점이다.

이것을 보완하기 위해서는 어떻게 해야할까?

바로 전역 변수인 빈 배열을 생성한 뒤, 그 안에 사용자가 입력한 값들을 차곡 차곡 담으면된다.

수정된 코드는 다음과 같다

        <script>

            var data = new Array();

            function input(){
                var str = document.getElementById("str");
                data.push(str.value);


                console.log(data);

            }
        </script>

사용자가 입력한 값을 배열에 차곡 차곡 담기

1. 전역 변수로 빈 배열을 생성한다.

2. id가 "str"인 (사용자가 입력한 값이 담겨있는) input 요소 객체를 str이라는 변수에 담아준다.

3. data라는 빈 배열이 있는 변수에 요소 객체에 담긴 그 ! 값 !을 넣어준다.

(2번 과정은 input 요소 객체만 담겨있지, 사용자가 입력한 값(== .value)은 담겨있지 않다)

이때, push() 메소드를 이용해서 배열의 맨 뒤에 차곡 차곡 담아주면 된다.

이제 출력을 하면된다.

            function printTest(){
                var print = document.getElementById("print");
                print.innerHTML = data;
                
            }

모범답안은 다음과 같다

    	function printTest(){
        	var print2 = document.getElementById("print2");
        	var str = data.join(',');
        	print2.innerHTML = str;
    	}

var str = data.join(','); < - 나는 이 구문을 따로 기술하지 않았는데

출력이 되었다.

내 구문에 이상이 없는 걸까?

기능이 구현되더라도 어쩌다가 운으로 맞춘건지 아니면 가능한 여러가지 방법 중의 하나인건지

내 코드로 기술 했을 때 다른 코드에는 문제가 없는 건지, 이런 것들이 궁금하다 ..!

전체코드

<!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>
</head>
<body>

    <h1>배열 실습 문제3</h1>
    <h4>문자열을 여러 개 입력 받은 후 출력 버튼 클릭시 입력했던 모든 문자열이 출력되도록 만드세요
        <br>예) 개구리 -> 입력, 바나나 -> 입력, 복숭아 -> 입력 <br>
        출력 : 개구리,바나나,복숭아
    </h4>

        <fieldset>
            <legend>입력</legend>
            <input type="text" name="str" id="str"> <button onclick="input();">입력</button>
        </fieldset>
        <p style="border: 1px solid red ;" id="print">이 부분에 정답이 출력 될 수 있도록 하세요</p>
        <button onclick="printTest();">출력</button>
        <script>

            var data = new Array();

            function input(){
                var str = document.getElementById("str");
                data.push(str.value);


                console.log(data);

            }

            function printTest(){
                var print = document.getElementById("print");
                print.innerHTML = data;
                
            }
        </script>
        <br><br>
        

    
        <br><br>



</body>
</html>

보완할 점

* p tag에 id 부여하기

* script 단에서 전역 변수로 빈 배열 선언하기

* 사용자가 입력한 값을 배열에 차곡 차곡 담기 < 위의 상세 내용 참조

728x90

저작자표시

'🚨 Error > JavaScript' 카테고리의 다른 글

[JavaScript] 라디오 버튼 클릭시 숨겨진 div창이 나오게하기 (0)	2021.04.19
[JavaScript] 사용자가 입력한 문자열을 배열에서 삭제하기 (0)	2021.04.18
[JavaScript] 문자열을 쪼개고, 역순으로 담기 (0)	2021.04.17
[JavaScript] 배열 \| 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다. (0)	2021.04.17
[JavaScript] 간이 계산기 만들기 (0)	2021.04.16