JS로 input 태그의 value속성을 동적으로 사용하기

이슈

html input 태그에 value 속성이 할당되었음에도 화면에 value 값이 노출되지 않았다.

해결과정

현재 value 속성은 자바스크립트를 활용해 동적으로 할당되고 있었다.

다만 할당하는 방식이 틀렸다.

수정 전

attr로 value를 지정하여 할당하고 있다. 이 경우 id 속성을 수정하는 것이 value 속성을 부여하는 게 아니다.

$(tr).children().children("#empno").attr("value", getValue(result));

수정 후

직접 value 속성을 할당한다.

$(tr).children().children("#empno").val(getValue(result));

JS를 사용해 동적으로 value 속성을 할당하는 방법

html:

<input type="text" class="col-sm-2 form-control" id="empno" name="empno" readonly>

JS:

$.ajax({
        success: function(result) {

					$(tr).children().children("#empno").val(getValue(result));
                    

			});
            
function getValue(row) {
			let resultValue = '';
			switch (row.resultValue) {
				case 'none':
					resultValue = "a";
					break;
				case 'allowed':
					resultValue = "b";
					break;
				case 'notallowed':
					resultValue = "c";
					break;
				default:
					resultValue = "d";
			}
			return resultValue;
		}

소감

알고보면 쉬운 에러였는데, 기존 JS 코드가 너무 복잡해서 찾아내는 데만 2시간이 넘게 걸렸다...