자바스크립트 초보자 질문 드립니다.
조회수 405회
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>invisible recaptcha</title>
<style>
.wrapper {
display: grid;
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;
}
.wrapper div{
border:1px solid black;
}
</style>
<script src="./script.js"></script>
</head>
<body onload = "showImage()">
<div class="wrapper">
<div><label><input type="checkbox" name="check" id="chk0"><label for="chk0"><img id = "introImg0" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk1"><label for="chk1"><img id = "introImg1" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk2"><label for="chk2"><img id = "introImg2" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk3"><label for="chk3"><img id = "introImg3" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk4"><label for="chk4"><img id = "introImg4" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk5"><label for="chk5"><img id = "introImg5" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk6"><label for="chk6"><img id = "introImg6" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk7"><label for="chk7"><img id = "introImg7" border="0" width=180 height=170></label></div>
<div><label><input type="checkbox" name="check" id="chk8"><label for="chk8"><img id = "introImg8" border="0" width=180 height=170></label></div>
</div>
<br>
<script>
var cnt = 0; //정답갯수
var choice = 0; // 내가고른그림 횟수
var src = new Array();
var val = new Array();
var classification = Math.round(Math.random()*4);
for(var i=0; i<9; i++){
src[i] = document.getElementById("introImg" + i);//src라는 배열에 정보삽입
if((src[i].src).indexOf("car") != -1){//[i]번째 이미지가 "car"이면
val[i] = 0;
}
else if ((src[i].src).indexOf("bus") != -1) {//버스
val[i] = 1;
}
else if ((src[i].src).indexOf("cat") != -1) {//고양이
val[i] = 2;
}
else if ((src[i].src).indexOf("ship") != -1) {//배
val[i] = 3;
}
else { //강아지
val[i] = 4;
}
}
</script>
<br><br>
<button class="btn" id="btn" type="submit" name="btn" onclick="btn_click()">정답확인</button>
</body>
</html>
나머지는 생략했는데, 콘솔창에서 확인해보면 val[i] 부분에 값이 제대로 안들어갑니다 ㅠ
if 조건문안의 값은 참인데 왜 val[i] = 0; 문장이 무시될까요?
2 답변
-
실제로 HTML 안의 이미지들에
src
속성이 없기 때문이 아닌가 싶어요. 데모를 짜보았는데 그럭저럭 예상했던 결과가 나오거든요.PS. 지금
img
태그에border
속성을 주셨는데, 알아보니, 공식적으로 HTML5에서는img
태그에border
속성을 쓰지 않습니다. -
showImage()함수에서 이미지를 로딩하긴 하겠지만, 이 함수보다 if문을 정의한 로직이 더 먼저 실행됩니다.
그렇기 때문에 아래 for문을 돌면서 if문안에 들어가는 조건의 경우 src[i].src가 항상 "" <- 공백 이기 때문에,
"4"밖에 들어갈 수가 없습니다.("".indexOf('XXXX') === -1)
-
(•́ ✖ •̀)
알 수 없는 사용자
-
댓글 입력