목표 : 개발자도구 인자 조절
O 한글자와 영역을 넘어서버린 회색 박스 그리고 붉은 박스 2개가 보인다.
소스 값부터 확인해보자
<html>
<head>
<title>Challenge 10</title>
</head>
<body>
<hr style=height:100;background:brown;>
<table border=0 width=1800 style=background:gray>
<tr><td>
<a id=hackme style="position:relative;left:0;top:0" onclick="this.style.left=parseInt(this.style.left,10)+1+'px';if(this.style.left=='1600px')this.href='?go='+this.style.left" onmouseover=this.innerHTML='yOu' onmouseout=this.innerHTML='O'>O</a><br>
<font style="position:relative;left:1600;top:0" color=gold>|<br>|<br>|<br>|<br>Goal</font>
</td></tr>
</table>
<hr style=height:100;background:brown;>
</body>
</html>
HTML
복사
클릭이 될 때마다 "this.style.left=parseInt(this.style.left,10)+1+'px' 를 실행하고
style.left가 1600px이 면 '?go='+this.style.left 링크를 불러온다.
parseInt는 10진수로 left 값을 추출하는 형태다.
onmouseover y0u로 바뀌는걸 확인할 수 있다.
실제로 클릭을 하면 좌측에 공백이 생긴다. 계속 1600번을 클릭하기에는 무리가 있다.
개발자도구 콘솔을 이용해 값을 바꿔주자
hackme를 어떻게 호출하는지 몰라 검색을 해보니 다음과 같은 방식으로 부를 수 있다.
$('a#hackme').style.left = 1599
HTML
복사
1씩 더하는 방식이므로 1599를 해놓고 온클릭으로 1600을 만들면 넘어갈거다.
화면에서 O가 사라져서 축소해보니 끝에 있었고 클릭을 하니
해결이 됐다.
지금보니까 그냥 ?go=1600px를 URL에 입력하면 안되나했더니
이 방식은 막아뒀다.
︎ 더 많은 게시물을 보려면