메뉴 건너뛰기

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 18233
242 이벤트 관련 질문 3 왕초보 2020.05.24 125
241 예제 4-14 질문이욤 2 file 코딩딩 2020.05.17 113
240 Image 객체 2 초보 2020.05.14 126
239 76페이지 1 ramoss 2020.05.13 44
238 예제 4-11 질문합니다. 2 초보 2020.05.04 88
237 list type 질문이요 2 file 021 2020.05.03 107
236 168p 예제4-8 질문 2 file 그냥초보 2020.05.01 79
235 185쪽 질문있습니다.. 3 file ㅇㅇ 2020.04.30 62
234 css3로 웹 페이지 꾸미기 3 file ㅇㅇ 2020.04.30 107
233 예제4-5 질문드립니다. 3 초보 2020.04.27 97
232 그림이 안떠요(실습문제 4장 7번) 2 file 초보자 2020.04.27 684
231 이미지를 어떻게 나오게 하나요? 1 나나 2020.04.26 78
230 3장 실습문제 2번에 쓰이는 이미지 파일은 어디에서 받을 수 있나요? 1 dpdms0926 2020.04.22 180
229 예제 5-3 220page 2 호기심 2020.04.16 355
228 94p 그림2-4 질문 2 file 그냥초보 2020.04.15 51
227 1장 그림1-14 2 file 000 2020.04.14 119
226 4장 연습문제 8번 질문이요 4 file 코딩은코딩코딩해 2020.04.14 250
225 인터넷 익스플로러 재질문이요 2 file 021 2020.04.13 125
224 인터넷익스플로러 질문이요 1 file 021 2020.04.10 48
223 3장 실습문제 5번문제에 대해 질문이있습니다. 1 CHUL 2020.04.09 221
목록
쓰기
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 ... 21 Next
/ 21
위로