본문 바로가기

JS4

[JS] location.reload() 사용법 내 코드 검색창에 값을 입력한 후 submit 버튼이 눌리고 나면 검색창만 사라진 페이지가 남는 상황이었다. 사용자가 다시 창으로 돌아와서 다른 값을 검색해보고 싶은 경우에는 불편한 상황이었기에 이를 개선하고자 submit 버튼이 눌리고 나면 창을 새로고침시켜주기로 했다. 오류 내용 loaction.reload()를 js 파일 함수 밖에 썼더니, 조건에 관계없이 계속해서 새로고침이 발생했다. 문제 해결 submit 버튼 클릭시 연결된 함수 안에, 그 함수의 작업들이 모두 끝난 후에 loaction.reload()를 통해서 페이지가 새로고침 될 수 있도록 해주었다. 함수 내에 새로고침 함수 넣어주기!!! 2022. 9. 30.

[JS] Uncaught TypeError: Cannot read property 'addEventListener' of null 내 코드 submit 버튼을 누르면 addEventListner가 작동하여 입력된 값들을 가지고 다음 페이지로 넘겨주어야 하는데 제대로 작동하지 않았다. 오류 내용 Uncaught TypeError: Cannot read property 'addEventListener' of null addEventListner가 null 값을 받아오고 있었다. 문제 해결 js 파일을 살펴보니 문제가 없었고, 문제는 html 파일에 있었다. html 파일과 js 파일을 연결해주는 script 코드를 html 파일의 header 태그 안에 작성하여서 페이지가 렌더링되기도 전에 작동이 되었던 것이다. 그렇기 때문에 addEventListner가 제대로 작동할 수 없었던 것이다. 그래서 script 코드를 body 밖으로 빼.. 2022. 9. 30.

[JS] event handler 사용법 갑자기 event handler 사용법을 적는 이유는... 내가 맨날 헷갈려서 쓸 때마다 찾아보기 때문... 이벤트(event)란 무엇인가? 웹 브라우저나 사용자가 행하는 어떤 동작이다. 하지만 브라우저 안에서 이루어지는 모든 동작이 모두 이벤트가 되지는 않는다. 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 속성 설명 click 마우스로 눌렀을 때 dblclick 마우스로 두 번 눌렀을 때 mousedown 마우스 버튼을 누르는 동안 mousemove 마우스 포인터를 움직이는 동안 mouseover 마우스를 위로 올릴 때 mouseout 마우스가 바깥으로 나갈 때 mouseup 마우스 버튼에서 손을 뗄 때 속성 설명 keypress 키를 눌렀을 때 keydown 키를 누르는 동안 keyup 키에서 .. 2022. 8. 4.

웹사이트 내에 랜덤으로 이미지 노출시키기 최근 만든 웹사이트(트위터 맛집 검색기 https://twitter-michelin-guide.netlify.app/)의 주 사용층이 아이돌 팬들이기 때문에, 초반에는 하루씩 돌려가면서 트친들이 좋아하는 아이돌 사진을 올려주었다. 그렇지만 세상은 넓고 아이돌은 많기 때문에 한번에 다 올려서 창이 새로고침 될때마다 다르게 띄워줘야겠다는 생각을 했다. (그럼 최애 찾으려고 새로고침도 많이하고 사이트 방문도 많이하고 읍읍..) 초보 개발자에게 웹사이트 개발은 구글링-복붙-고치기의 연속이 아닐까... 반박시 님들 말이 다 맞음. 내가 잘 몰라.. 암튼 그렇게 구글링을 했는데,, 이게 언어도 다양하고 (개발 언어든, 말하는 언어든,,,) 쉽게 적용하기가 어렵더라...구요... 그래서 여러 코드 참고해서, 제가 돌.. 2022. 1. 26.

이전 1 다음

티스토리툴바