[JSP] <JavaScript> 라디오 버튼을 선택한 상태에서 textarea 값을 습득이 불가

수정 전 코드

function writeReview(){
	var form = document.getElementById('writeReviewForm');
			
	var radioButtons = document.querySelectorAll('input[type=radio][name="rating"]');
	radioButtons.forEach(function(radioButton) {
		console.log("[로그] 라디오 반복문");
		if (radioButton.checked) {
			console.log("[로그] 별점 :" + radioButton.value);
			form.innerHTML += '<input type="hidden" name="score" value="' + radioButton.value + '">';
		}
	});
			
	var a = $("#contents").val();
	console.log("[로그] 내용 :" + a);
			
	form.innerHTML += '<input type="hidden" name="contents" value="' + $("#contents").val() + '">';
	form.innerHTML += '<input type="hidden" name="BID" value="' + ${BID} + '">';
			
}

수정 후 코드

function writeReview(){
	var form = document.getElementById('writeReviewForm');
			
	var radioButtons = document.querySelectorAll('input[type=radio][name="rating"]');
	radioButtons.forEach(function(radioButton) {
		console.log("[로그] 라디오 반복문");
		if (radioButton.checked) {
			console.log("[로그] 별점 :" + radioButton.value);
			var scoreInput = document.createElement('input');
		   	scoreInput.type = 'hidden';
		   	scoreInput.name = 'score';
		   	scoreInput.value = radioButton.value;
		   	form.appendChild(scoreInput);
		}
	});
			
	var a = $("#contents").val();
	console.log("[로그] 내용 :" + a);
			
	var contentsInput = document.createElement('input');
	contentsInput.type = 'hidden';
	contentsInput.name = 'contents';
    contentsInput.value = $("#contents").val();
    form.appendChild(contentsInput);

	var BIDInput = document.createElement('input');
	BIDInput.type = 'hidden';
	BIDInput.name = 'BID';
	BIDInput.value = ${BID};
	form.appendChild(BIDInput);
		  	
	form.submit();
			
}

원인

• 라디오 버튼에서 값이 선택된 상태에서 textarea의 값을 습득할 수 없는 이유는 자바스크립트의 코드가 변경된 DOM에 대해서만 동작하기 때문일 수 있다.