메뉴 건너뛰기

Home
2018.10.21 12:50

오픈 첼린지 9장 질문 있습니다.

muuum
조회 수 633 댓글 4

<html>
<head>
  <title>Document</title>
  <style>
    table { border-collapse: collapse;}
    table tr td { border:1px solid red; width:70px; height:70px}
  </style>
  <script>

    function catch(){
      alert("safsf");
    }

  </script>
</head>
<body>
  <h3>마우스 클릭 연습</h3>
  <hr>
<table>
  <tr>
    <td><img src="예제의 미디어 파일들\9장\media/strawberry.png" onclick="catch()" width="70px;" height="70px;"></td>
    <td><img src="" onclick="catch()"></td>

 

2018-10-21 12;47;16.PNG

 

 

이미지태그에 onclick 를 주고 우선 제대로 동작하는지 테스트를 해보고있는데

 

뭐가 잘못됐길래 onclick에 전혀 반응을 안하는건가요?

 

script 태그에 alert 이나 document.wirte 나 innerHTML 로 넣어봐도 다 반응이 없네요ㅠ

 

Atachment
첨부 '1'
위로 아래로 댓글로 가기 첨부 수정 삭제
?
에디터 사용하기 닫기
Comments '4'
  • ?
    관리자 2018.10.21 21:35
    catch는 자바스크립트 언어의 키워드 입니다.
    자바스크립트에도 자바나 C++과 같이 예외처리를 위한 다음 구조를 지원합니다.

    try {
    tryStatements
    }
    catch(exception){
    catchStatements
    }
    finally {
    finallyStatements
    }

    함수 이름을 catch 대신 다른 것으로 수정하면 됩니다.
    그리고 오류는 아니지만 HTML5 문서임을 나타내기 위해
    HTML 페이지 첫 줄에 <!doctype html>를 넣도로 하세요.
    수정 삭제 댓글
  • ?
    muuum 2018.10.22 00:07 Files첨부 (2)

    답변 감사합니다. 

    코드를 새로 짜봤는데 이미지를 클릭했을 때 새로운 이미지가 생겨나는 것 까지는 되나

    그 전에 있던 이미지 삭제 하는 방법을 모르겠습니다.

    css 태그 style 에서 width 와 height를 주지 않고 스크립트내에서 집어넣은 이유는

    없는 이미지 상태에서는 깨진 이미지 아이콘이 나와서 지저분해서 입니다.

     

     

    2018-10-22 00;04;13.PNG

     

    <script>
      function start(){
        var ranInt = Math.floor(Math.random()*100)+1;
        var ss = document.images[ranInt]
        ss.src ="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";
      }

      function getcha(){
        var ranInt = Math.floor(Math.random()*100)+1;
        var ss = document.images[ranInt]
        ss.src="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";

      }
      </script>
    </head>
    <body onload="start()">
      <h3>마우스 클릭 연습</h3>
      <hr>
    <table>
      <tr>
        <td><img src="" onclick="getcha()"></td>
        <td><img src="" onclick="getcha()"></td>

    .....

     

     

    2018-10-22 00;02;31.PNG

     

     

    이 문제 때문에 거진 24시간을 헤매고 있네요ㅠㅠ

     

    수정 삭제 댓글
  • ?
    관리자 2018.10.22 09:17

    이 문제는 여러 가지 방법으로 해결할 수 있습니다.
    2가지 방법만 설명합니다.

    1. 이미지의 크기를 주지 마세요. 그리고 클릭된 이전 이미지를 기억해두세요.
    다음과 같이 해보세요.
    var last; // 클릭된 이미지 기억
    function start(){
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src ="st.png";
    last = ss; // 기억
    }

    function getcha(){
    last.src = ""; // 이전 이미지의 소스 제거
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src="st.png";
    last = ss; // 현재 이미지가 이전 이미지가 됨
    }

    2. 두번째 방법은 책의 5장 224페이지의 visibility 스타일을 사용하는 방법입니다.(예제 5-7참고)
    var last; // 클릭된 이미지 기억
    function start(){
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt]
    ss.src ="st.png";
    ss.style.width ="70px";
    ss.style.height = "70px";
    last = ss;
    }

    function getcha(){
    last.src = "";
    last.style.visibility = "hidden"; // 이전 이미지를 보이지 않도록 스타일 변경
    var ranInt = Math.floor(Math.random()*100);
    var ss = document.images[ranInt];
    ss.src="st.png";
    ss.style.width ="70px";
    ss.style.height = "70px";
    ss.style.visibility = "visible"; // 현재 이미지를 보이게 설정. 혹시 이 이미지가 이전 이미지 였을 수도 있기 때문
    last = ss; // 현재 이미지는 다시 이전 이미지가 됨
    }

    3. 그리고 소스 코드에서 var ranInt = Math.floor(Math.random()*100) + 1; 에서 1을 제거해야 합니다.
    var ranInt = Math.floor(Math.random()*100);

    4. 24시간을 해맨 것은 나쁜 것이 아닙니다. 그러면서 성장할 것이니 투자라고 생각하세요.

    제가 방법만 알려드렸습니다. 잘 응용해서 완성해 보세요.

    이미지의 경로명이 길어서 st.png로 바꾸었으니 헷갈리지 마세요.

    이상입니다.

    수정 삭제 댓글
  • ?
    muuum 2018.10.22 23:15 Files첨부 (1)

    감사합니다. 알려주신 방법으로 다 해보고 습득했습니다^^

    알려주신 last 처럼 초기화를 시키는 방법을 처음에 시도를 해봤었는데 기초지식이 부족해 잘안되어 많이 헤맸네요ㅠ

    제 나름대로 검색과 질문을 통해 해결한 방법도 올려 보겠습니다.

    이 방법과 알려주신 첫번째 방법으로 했을 때 이미지의 크기가 셀의 크기를 넘어버려서 셀이 망가지게 되던데 이 부분을 해결할 수 있도록

    이미지의 크기를 셀의 크기를 못 넘어가게 강제 시키는 방법은 혹시 없을까요?

    2번째 방법 같은 visibility 같은 경우 출력이 되있는걸 안보이게 하는거라 셀이 천개, 만개 이렇게 될 경우엔 과부하가 걸리진 않는건가요?

     

    <script>
      function start(){
        var ranInt = Math.floor(Math.random()*100);
        var ss = document.images[ranInt]
        ss.src ="예제의 미디어 파일들/9장/media/strawberry.png";
      }

      function getcha(obj){
        var ranInt = Math.floor(Math.random()*100);
        var ss = document.images[ranInt]
        ss.src="예제의 미디어 파일들/9장/media/strawberry.png";
        ss.style.width ="70px";
        ss.style.height = "70px";
        obj.setAttribute("src","");
      }


      </script>
    </head>
    <body onload="start()">
      <h3>마우스 클릭 연습</h3>
      <hr>
    <table>
      <tr>
        <td><img src="" onclick="getcha(this)"></td>
        <td><img src="" onclick="getcha(this)"></td>

     

    2018-10-22 23;11;48.PNG

     

     

    수정 삭제 댓글

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.20 18280
363 몽구스 서버 외부접속 질문드립니다. 1 명품프로그래머 2017.10.26 277
362 7장에 실습문제 4번 질문 1 asd123 2017.11.05 1634
361 7장 실습문제 1번 질문 있습니다. 7 jonjsin 2017.11.09 603
360 8장 오픈챌린지 질문있습니다 1 jsch 2017.11.12 823
359 5장 실습문제 4-2질문 2 어어엉 2017.11.12 367
358 10장 오픈챌린지 testr 2017.11.19 888
357 9장 3번 질문 있습니다. 2 jonjsin 2017.11.23 380
356 520페이지 에 쿠키쓰기 질문 1 os 2017.12.09 104
355 예제 13-5 구글 위치지도 안뜨는데요? 2 rr 2017.12.09 187
354 7장 이론문제 3번 이의제기 합니다. 3 file 혁999 2017.12.10 1279
353 2-26 오디오 삽입 모바일 문의 2 한수연 2017.12.12 101
352 짝수번 정답 3 idididid 2017.12.24 3135
351 몽구스 관련 질문입니다. 1 류경선 2018.01.20 490
350 2장 예제 2-24에 관한 질문입니다. 1 최원석 2018.01.29 191
349 3장 open challenge 질문해봅니다 6 진혁 2018.01.30 1247
348 실제로 사용해봤습니다 ! ㅠㅠ 1 갱자데쓰 2018.02.06 120
347 제1장 오픈챌린지/실습문제 질문 2 file Soyoyum 2018.02.07 637
346 저자님 책 재미있게 보고있습니다.319쪽질문입니다. 2 칼잡이최제잘 2018.02.10 176
345 357쪽 예제 8-2 윗부분 2 칼잡이최제잘 2018.02.12 130
344 저자님 367페이지 질문있습니다~~ 1 file 칼잡이최제잘 2018.02.19 591
목록
쓰기
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로