자바스크립트 4일차 - 배열 입력 > 응용한 출석부 만들기

배열 선언 방법

let arr =[];

 

배열 입력 방법

arr.push(value)

 

 

간단하죠?

 

이를 응용해서 출석부를 만들어 보겠습니다. 

저번시간에 배운 input 태그와 queryselector, innerHtml 을 활용할 것입니다.

<article class="att">

<h2>출석부(<code>0</code>)</h2>

<div>

<input type="text" name="name">

<button> 저장</button>

</div>

<ul></ul>

</article>

 

먼저 출석부 부분을 만들어줍니다. 

태그들을 사용해서 이름을 입력받을수 있도록 input태그 먼저 사용

button을 사용한 저장버튼 그리고 ul태그를 사용해 출력 부분을 만들어줍니다. 

 

그럼 이렇게 출석부(0) 

인풋태그 (저장버튼)이 완성되겟죠?

 

이후 스크립트를 통해 원하는 기능들이 정상동작 하도록 작업해줍니다. 

목표는 다음과 같습니다. 

1. 인풋 태그에 입력한 값 확인

2. 저장버튼을 누를 시 인풋 태그의 입력값을 array에 저장함

3. 저장한 값을 ul태그 안쪽에 li로 출력해주기.

4. 출석부 옆의 숫자를 입력된 값 갯수 만큼 변화시키기

const elInput = document.querySelector('.att input');

const elButton= document.querySelector('.att button');

const elUl = document.querySelector('.att ul');

const elCode = document.querySelector('.att code');

먼저 각각 qeurySelector를 통해 값을 받아왔습니다 

let arr =[];

배열을 선언해줍니다. 

 

자 먼저 버튼 클릭 이벤트를 받아야겠죠?

onclick이벤트를 사용해줍니다. 

elButton.onclick = function(){}

그리고 중괄호 안에 if문을 써서 인풋 태그에 값이 있을 경우를 체크해줍니다. 

if(elInput.value){

 

그리고 나서 arr에 push를 사용해서 인풋 태그의 값을 넣어줍니다. 

arr.push(elInput.value)

elInput.value='';

인풋 태그에 적힌 값은 초기화 합니다. 

 

그리고 추가로 배열의 길이는 code부분에 업데이트를 해줍니다. 

elCode.innerHTML = arr.length;

 

자 이렇게 하면 완성입니다 .

 

간단하죠?

인풋태그에 입력하고 나서 저장버튼을 누르면 아래에 ul쪽에 li로 출력이 되는 프로그램 완성입니다.