-
[JS] HTML 버튼 클릭 시 JavaScript 함수 호출 시 매개변수 전달이 안 되는 문제언어/Javascipt 2024. 4. 17. 13:46
❓만약에 onclick =”if_click_login(여기에)” 여기에 ‘clciked’ 를 넣으면? 함수랑 겹치는 데 어떻게 되려나
위 질문으로 부터 시작되었습니다.
상황 설명
위 사진의 빨간색 동그라미를 보시면 login button을 클릭할 때, 팝업창이 뜨고, 팝업창 안의 메시지는 ' clicked ' 가 나오게 되어 있습니다.
onclick : 요소가 클릭되었을 떄, 특정 동작을 수행하도록 지정alert('쓰고싶은 메시지를 작성하세요.') : 경고창(팝업)을 표시하는 함수입니다.
따라서 위 사진 같이 login button을 click 할 때, 경고창(팝업) clicked 했다 라고 뜨는 것입니다.
신기하쥬?
이제 Function(함수)를 이용해서 똑같이 해보겠습니다.
js파일에 위 사진과 같이 작성해줍니다.
위 사진과 같이 수정해줍니다. () 소괄호 넣는 거 깜빡하지 마세요 ! 제가 그랬거든요..
똑같이 아주 잘 돌아가는 모습을 볼 수 있습니다.
여기부터 질문에 대한 내용입니다.
1. onclick = "alert('clicked')"
2. onclick = "if_click_login()"
3. 그러면 1번을 2번에 대입 하면 어떻게 될까요?
4. if_click_login() 소괄호 안에 'HI' 라고 작성해보겠습니다.
결과는 clicked 경고창 한번만 뜨고 HI에 대한 경고창이 뜨지 않았습니다.
WHY ❓
HTML 코드에서 onclick 이벤트 핸들러를 사용하여 버튼이 클릭되었을 때 if_click_login('hi') 함수를 호출하도록 설정하였습니다. 그러나 JavaScript 코드에서 if_click_login() 함수는 매개변수를 받지 않도록 정의되어 있습니다. 따라서 브라우저가 if_click_login('hi')를 호출할 때 매개변수가 필요 없는 함수를 호출하려고 시도하게 되어 오류가 발생하는 것입니다.
그럼 'HI'를 호출 하고 싶으면 어떻게 해야될까 ❓
이를 해결하기 위해서는 if_click_login() 함수를 매개변수를 받을 수 있도록 수정해야 합니다. 그리고 HTML 코드에서 onclick 이벤트 핸들러를 호출할 때 필요한 매개변수를 전달해야 합니다.
따라서 JavaScript 코드를 수정하여 if_click_login() 함수가 매개변수를 받도록 만들고, HTML 코드에서도 해당 매개변수를 전달하도록 해야 합니다. 이렇게 하면 오류가 발생하지 않고 원하는 기능을 구현할 수 있습니다.
// login.js function if_click_login(message){ alert('1'); alert(message); // 전달받은 메시지 출력 }이렇게 한 뒤 경고창 '1'이 나타나고
'HI' 까지 잘 나타나는 것을 볼 수 있습니다.
❓왜 스크립트는 바디 맨 끝에 쓰나?
스크립트를 <body> 요소 맨 끝에 작성하는 것은 페이지 로딩 속도를 향상시키고 사용자 경험을 개선하는 데 도움이 되며, 코드 관리를 보다 용이하게 만듭니다.
'언어 > Javascipt' 카테고리의 다른 글
[JS] const 키워드로 선언된 객체의 속성 값을 변경은 가능할까? (0) 2024.06.25 [JS] map 객체에서 key : value vs 객체 (0) 2024.06.24 [JS] substring 이 글 하나로 완벽 정리 (0) 2024.06.24 [JS] 예약어 오류 나는 이유 & 오류 종류가 다른 이유 (1) 2024.04.16 [프로그래머스] Hello, JavaScript : 자바스크립트 입문(실습풀이포함) (1) 2024.04.03