<자바스크립트 Javascript> 선택지 만들기(심리테스트 알고리즘 이용) (2)

(5) 4번에서 버튼들에 클래스명을 추가하여 선택자로 CSS 효과 등을 줄 수 있도록 한다고 했는데, 이 부분을 수정하게 됐다. 추후에 각 질문에서 선택한 버튼들을 모아 결과지를 만들어야 하는데, 그러려면 버튼에 개별적으로 이름을 붙여 하나씩 가져올 수 있도록 해야하는 부분인지라 button이라는 클래스명으로는 구분이 어려웠던 것이다. 따라서 판다코딩님의 강의를 참고하여, 비슷하게 인덱스를 활용하였다.

//버튼 추가
function begin1() {
	for(let i=0;i<answer1.length;i++){
		addButton(answer1[i], i);
	}
}	

function begin2() {
	for(let i=0;i<answer2.length;i++){
		addButton(answer2[i], i);
	}
}

function begin3() {
	for(let i=0;i<answer3.length;i++){
		addButton(answer3[i], i);
	}
}

//버튼에 텍스트 , 클래스명 추가
function addButton(answerText, idx) {
	const button = document.createElement('button');
	$("#abox").append(button);
	button.innerHTML = answerText;
	button.classList.add(idx);

버튼을 추가할 때에 버튼에 넣을 값 뿐만 아니라 index번호도 같이 매개변수로 보내어 이것을 버튼의 클래스명으로 정하기로 했다. 위 코드에서는 이 index번호를 idx라는 매개변수로 받아 넣어주었다.

 

 

6) 각 질문 페이지에서 질문에 대한 답으로 버튼을 클릭하면, 다음 질문 페이지로 넘어갈 수 있도록 링크를 만들어준다. 주의할 점은 이벤트는 앞의 addButton 함수 내부에 있어야 한다는 것이다.

	//버튼 클릭 시 다음페이지 이동
	button.addEventListener("click", function() {
		let link = window.location.href;
		if(link == "http://localhost:8080/common/ch1"){
			location.href="ch2";
		}else if(link == "http://localhost:8080/common/ch2"){
			location.href="ch3";
		}else {
		}
	})
}

다음 페이지로 넘어갈 수 있도록 이 부분은 단순하게 location.href를 이용하였다. 먼저 link 변수를 만드는데, link가 현재 페이지를 나타낼 수 있도록 값을 설정해준다. 그리고 버튼이 클릭되면, if문에서는 먼저 이 link 변수를 통해 현재 버튼을 클릭한 페이지가 어디인지 확인하고, 질문 1에 대한 페이지라면 2 페이지로 넘겨주고, 2 페이지라면 3페이지로 넘겨준다. 그리고 마지막으로 3 페이지는 더 이상 이동할 질문 페이지는 없기 때문에 비워두었다. 이 순서를 잘 생각해야 한다..

 

 

7) 각 질문 페이지에서 선택한 버튼이 어떤 것인지 알 수 있도록 로컬스토리지에 저장하여 다음 페이지로 넘겨준다.

	//버튼 클릭 시 다음페이지 이동
	button.addEventListener("click", function() {
		let link = window.location.href; // 현재 페이지의 url 값
		if(link == "http://localhost:8080/common/ch1"){
			choice = $(this).attr('class'); //클릭한 버튼의 클래스명 가져와서 저장
			let a = {"a1" : choice}; //localstorage 형태로 클래스명 value로, a1을 key로 저장
			localStorage.setItem('a1', JSON.stringify(a)); // a1라는 key에 a 변수를 저장(객체->문자열 변환)
			location.href="ch2";
		}else if(link == "http://localhost:8080/common/ch2"){
			choice = $(this).attr('class');
			let a = {"a2" : choice};
			localStorage.setItem('a2', JSON.stringify(a));
			location.href="ch3";
		}else {
			choice = $(this).attr('class');
			let a = {"a3" : choice};
			localStorage.setItem('a3', JSON.stringify(a));
			result();
		}
	})
}

이 부분에서 DB의 필요성을 절감하게 되었다. 각 페이지에서 저장된 버튼의 값을 다음 페이지로 넘겨줘야 했는데, DB가 없으니 바인딩을 해야 했고, 자바스크립트에서 바인딩을 할 수 있는 방법으로는 로컬스토리지(localstorage)를 이용하는 것이었다. 하지만 그렇게 되니 또 값을 넘겨줄 때에 JSON을 사용해야 하고.. 이것이 괜찮은 코드가 맞는 것인가 싶었지만 처음의 기획을 우선은 끝까지 가져가보기로 하고 위처럼 코드를 작성해보았다.

 

해당 질문 페이지에서 선택한 버튼의 클래스(앞에서 인덱스 번호로 지정해두었던 것!)명을 가져온다. 그리고 이것을 로컬스토리지에 알맞은 형태로 a라는 변수에 저장한다. 그리고 로컬스토리지에 새로운 키 값과 함께 JSON의 객체를 문자열로 변환하는 stringify 함수로 a라는 변수의 값을 저장한다.

 

JSON을 이용하게 된 이유는 전역에 공유되는 변수의 역할로서 로컬스토리지로도 충분하다 생각할 수 있으나, 로컬스토리지는 문자형 데이터 타입만 지원하기 때문이었다. 이 경우 따라서 숫자를 데이터 값으로 넣으면 숫자 그대로 가져올 수가 없는 것이다. 그래서 변환이 필요했는데, 그것이 JSON을 이용한 방법이었고, JSON의 stringify 함수를 이용해서 값을 일단 저장하고 나면 가져올 때에는 또 다시 parse를 통해 값을 객체로 변환해주어야 했다. 그래서 위와 같은 코드로 작성하게 되었다. (참고 : https://www.daleseo.com/js-web-storage/)

 

parse의 경우는 마지막 질문 페이지에서 result 함수를 호출하여 result 함수 내에서 해결하기로 하였다.