메뉴 건너뛰기

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 18232
362 스크립트에서 document.write로 표 만들기 질문드립니다. 1 file 입문한 사람 2020.06.08 1107
361 실습문제 7장 2번의 입력된 반대순으로 출력이 넘 힘듭니다 도움좀 주세요 제발 ㅠㅠ 도널드임 2019.05.27 1105
360 6장 실습문제 짝수 답좀 알려주실분? 제발요  도움 2017.09.18 1105
359 open challenge 코드 11 hardworking 2017.03.27 1103
358 11장 실습문제 6번 arc()문제 제발요 2019.12.06 1093
357 07장 10번 답좀 알고싶습니다... 2 abcd 2017.06.11 1088
356 7장 오픈첼린지 1 Bolt 2017.04.11 1071
355 9장 연습문제 4번 1 초보 2020.10.16 1007
354 몽구스 질문있습니다 ㅜㅜ 3 몽구스초보입니다 2019.01.10 1003
353 오픈챌린지 9장 littlelion 2018.06.20 1002
352 실습문제 7장에 8번 질문 1 abcd 2017.05.09 994
351 한글html 1 키보드 향기 2020.03.29 919
350 4장 19번 1 .. 2018.09.28 906
349 [명품 html5+ css3+ javascript 웹 프로그래밍 수정판] 1장 실습문제 4번 질문합니다... 2 file 나능냐공도리 2021.04.17 904
348 8장 오픈챌린지 1 감자먹을래 2018.04.16 890
347 10장 오픈챌린지 testr 2017.11.19 888
346 11장 실습문제 6번 질문입니다. 1 file 메론 2018.11.29 884
345 10장 이론문제 10번 질문입니다. 3 하늘하 2019.05.15 849
344 6장 실습 8번 1 어려워 2018.12.18 832
343 연습문제 짝수답은어디있나요?? 묵 2021.02.16 828
목록
쓰기
Board Pagination Prev 1 ... 2 3 4 5 6 7 8 9 10 ... 21 Next
/ 21
위로