onclick에서 매개변수로 문자, 숫자 script로 전달 / 스크립트릿 ReferenceError

버튼에서 onclick 속성을 사용해서 script에서 동작을 처리해주려고 할 때, onclick에서 두 개의 매개변수를 가져오려고 했습니다.

매개변수 하나는 게시글의 번호(숫자)이고, 다른 하나는 게시글의 제목(문자)입니다.

숫자의 경우 금방 값을 가져와 확인할 수 있었는데, 문자를 가져오는 경우에서 "Uncaught ReferenceError: 문자. is not defined at HTMLButtonElement. onclick"라고 에러가 발생했습니다. ReferenceError는 잘못된 값을 가져오려고 할 때 발생한다.

 

두 개의 버튼으로 숫자와 문자를 각각 스크립트로 가져오는 방법을 확인한 후에 한 개의 버튼으로 숫자와 문자를 동시에 스크립트로 가져오는 방법을 확인해 보겠습니다.

 

Button의 onclick 속성을 사용해서 숫자와 문자를 script로 보내기

값을 가져오는지 확인하기 위해서 간단하게 alert을 사용하는 방법으로 확인했습니다.

아래와 같이 실행하니 숫자를 보낼 때는 문제없이 alert창이 등장했지만, 문자의 경우에는 에러가 발생했습니다.

<script>
	function costdeletFn(a){
		alert(a);
	}
</script>
.
.
.
<button type="button" onclick="costdeletFn(<%=cvo.getCidx()%>)"> 삭제 </button> //숫자
<button type="button" onclick="costdeletFn(<%=cvo.getCostname()%>)"> 삭제 </button> //문자

 

문자를 매개변수로 전달했을 때 오류

 

해결 방법

이유는 간단했습니다. 숫자의 경우에는 매개변수에서 따옴표가 없어도 되지만, 문자열의 경우는 따옴표가 필요하기 때문입니다.

간단한 예를 보면 button에서 onclick 속성을 사용해서 매개변수 값을 보내는 것을 해보면, 숫자의 경우에는 따옴표를 사용하지 않아도 되지만 문자의 경우에는 데이터에 ''(따옴표)를 사용해야 합니다.

<button type="button" onclick="method('백')">문자버튼</button>
<button type="button" onclick="method(100)">숫자버튼</button>

 

문자를 전송하는 button을 다시 보면 <%=cvo.getCostname%>의 스크립트릿 태그는 실제로는 ''주문명'과 같은 문자에 해당하기 때문에 아래와 같이 ''따옴표를 사용해야 합니다.

<!--ReferenceError 발생-->
<button type="button" onclick="costdeletFn(<%=cvo.getCostname()%>)">삭제</button>

<!--정상 작동-->
<button type="button" onclick="costdeletFn('<%=cvo.getCostname()%>')">삭제</button>

반응형

---

onclick에서 Script에 다양한 매개변수를 전달하는 방법

1. 문자 매개변수 전달

문자 매개변수는 ''(작은따옴표) 또는 ""(큰따옴표)로 감싸서 전달합니다.

<button type="button" onclick="myFn('abc','ㄱㄴㄷ','123')">버튼</button>

 

2. 숫자 매개변수 전달

숫자 매개변수는 따옴표 없이 전달할 수 있습니다.

<button type="button" onclick="myFn(123,45,6)">버튼</button>

 

3. 스크립트 매개변수 전달

스크립트 태그는 ''(작음따옴표) 또는 ""(큰따옴표)로 감싸서 전달합니다.

<button type="button" onclick="myFn('<script>alert(\'HELLO\');</script>">버튼</button>