슬라이드 질문 입니다.
본문
질문자의 문제 점
* 사용하고자 하는 창에서 (즉 전체 코드에서) 스크립트를 연동하여 작동을 하면 Cannot read property 'setAttribute' of null
at changeImage (ice.js:6) 라는 오류가 발생을 합니다.
똑같이 다른 창에서 이부분만 복붙 하여 실행을 시키면 작동이 잘 되며 오류도 없습니다.
* 문제의 부분은 색깔로 표시 하였습니다.
원인을 찾기 위해 5일을 쏟아 부어 봤지만 해결이 안됩니다.
도와주세요.
혼자 힘으로는 도저히 해결을 못 하겠어요.
html 전체 코드 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@800&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/926fe18a63.js"></script>
<link rel="stylesheet" href="css/ice.css.css">
<script src="js/ice.js"></script>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<!--HEADER START-->
<div class="contaienr">
<div class="head hero">
<header class="header">
<div class="logo headA">
<a href="ice.html"><img src="images/ice.logo.png" alt="logo" width="250px">
<!-- <button type="button" class="btn" display="none;">
<span class="fa fa-bars" title="MEMU"></span>
</button>-->
</a>
</div>
<div class="headB">
<nav>
<ul>
<li><a href="#">스티키리키</a></li>
<li><a href="#">이야기</a></li>
<li><a href="#">프레스</a></li>
<li><a href="#">맛</a></li>
<li><a href="#">상품</a></li>
<li><a href="ice1.html">문의 </a></li>
<li>
<a href="https://www.instagram.com"><img src="images/insta.png" alt="#" width="20px" height="20px;">
</a></li>
<li>
<a href="https://ko-kr.facebook.com">
<img src="images/face.png" alt="#" width="20px" height="20px;">
</a></li>
</ul>
</nav>
</div>
</header>
</div>
<!--content-->
<div class="content headC">
<div class="img">
<img src="images/ice.3.png" alt="background">
</div>
<section class="bgcolor">
<h3>재밌고 맛있는 리얼 수제 아이스크림<br> 정성으로 진지하게 만듭니다.</h3>
<p>REALICE CREAM FROM SCRATCH</p>
<button><a href="ice1.html">LEARN MORE</a></button>
</section>
</div>
<div class="photo">
<div class="imgbox">
<img src="images/ice.6.png" alt="ice" height="520px;">
<div class="imgtext">
<p>스티키리키 플레이보 스토리 출간</p><br>
<small>아이스크림 쿠폰1매 동봉</small>
</div>
</div>
<div class="imgbox">
<img src="images/ice.7.png" alt="ice" height="520px;">
<div class="imgtext">
<p>트리플 테이크 아웃 시작</p>
<br><br>
<small>집에서도 스티키리키를 즐기세요</small>
</div>
</div>
<div class="imgbox">
<img src="images/ice.8.png" alt="ice" height="520px;">
<div class="imgtext">
<p>가을가득한 신메뉴 출시</p><br>
<small>짧은 가을을 맛있게</small>
</div>
</div>
</div>
<!--slide-->
<div class="icemove">
<h3>시그니처 맛, 제철에 맞는 맛 이외에 <br>스티키리키는 즐거운 맛을 만듭니다.</h3>
<div class="img">
<img src="images/ice.4.png" alt="#" id="mainImage">
</div>
<button><a href="">EXPLORE OUR FLAVORS</a></button>
</div>
<div class="article">
<div class="photo">
<img src="images/ice.9.jpg" alt="" width="450px;">
<div class="phototext">
<small>스티키리키 한글 티셔츠</small>
</div>
</div>
<div class="photo">
<img src="images/ice.6.png" alt="" width="450px;">
<div class="imgtext">
<small>스티키리키 플레이보 스토리 출간</small>
</div>
</div>
<div class="photo">
<img src="images/ice.10.jpg" alt="" width="450px;">
<div class="imgtext">
<small>스티키리키 한글 노란 티셔츠</small>
</div>
</div>
</div>
<div class="font">
<h1><a href="">Instagram</a></h1>
<h3><a href="">@stickyrickys</a></h3>
</div>
<div class="instagram">
<div class="phto"><a href="">
<img src="images/ice.11.jpg" alt="" width="450px;" height="350px;"></a>
</div>
<div class="phto"><a href="">
<img src="images/ice.12.jpg" alt="" width="450px;" height="350px;"></a>
</div>
<div class="phto"><a href="">
<img src="images/ice.13.jpg" alt="" width="450px;" height="350px;"></a>
</div>
<div class="phto"><a href="">
<img src="images/ice.14.jpg" alt="" width="450px;" height="350px;"></a>
</div>
<div class="phto"><a href="">
<img src="images/ice.15.jpg" alt="" width="450px;" height="350px;"></a>
</div>
<div class="phto"><a href="">
<img src="images/ice.16.jpg" alt="" width="450px;" height="350px;"></a>
<small><a href="#">더보기..</a></small>
</div>
</div>
<!--footer start-->
<footer>
<div class="f_container">
<div class="footA">
<h4>스티키리키 아이스크림
(Sticky Ricky's Ice Cream)</h4>
<p>서울 용산구 두텁바위(28 duteopbawi-ro 1-gil, yongsan-gu,seoul)<br>
business Reg 428-15-00518</p>
<h4>WED-FRI 12PM-8PM<br>SAT-SUN 1PX-8PX</h4>
</div>
<nav class="footB">
<ul>
<li><a href="#">
<span class="fa fa-twitter" title="Twitter"></span>
</a></li>
<li><a href="#">
<span class="fa fa-facebook" title="Facebook" ></span>
</a></li>
<li><a href="#">
<span class="fa fa-google-plus" title="Google Plus"></span>
</a></li>
<li><a href="#">
<span class="fa fa-instagram" title="Instagram"></span>
</a></li>
<li><a href="#">
<span class="fa fa-youtube" title="YouTube"></span>
</a></li>
</ul>
</nav>
</div>
</footer>
</div>
</body>
</html>
js 전체 코드 입니다
var myImage=document.getElementById("mainImage");
var imageArray=["images/ice.4.png","images/ice.5.png"];
var imageIndex=0;
function changeImage(){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
imageIndex=0;
}
}
setInterval(changeImage,1000);
답변 3
js 전체 코드 입니다
var myImage=document.getElementById("mainImage");
var imageArray=["images/ice.4.png","images/ice.5.png"];
var imageIndex=0;
function changeImage(){
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex>=imageArray.length){
imageIndex=0;
}
}
setInterval(changeImage,1000);
이전체 소스를 위 html 하단에 사용하세요...
아니면 코드가 포함된 <script src="js/ice.js"></script>를 위 html 하단에 사용하세요...
var myImage=document.getElementById("mainImage");
이게 html 불러오기전에 상단에 사용되어서 찾을수 없다고 오류를 뱉어내는거 같습니다.
^ ^
감사합니다 덕분에 잘 해결 되었고 또 새로운걸 덕분에 배웠네요 ㅎㅎ
에디터를 어떤 거 쓰시나요?
안보이는 문자가 스크립트에 포함된 거 같은데요
https://en.wikipedia.org/wiki/Zero-width_space
되는 페이지가 있다고 하니
이게 문제인지는 모르겠지만
var imageIndex=0;
function changeImage(){
이 사이의 공백줄을 지워보세요
UTF-8 + BOM 문제인가....
https://gnustudy.com/bbs/board.php?bo_table=gnu_tip&wr_id=40
여기도 참고해보세요
네 한번 정독 해보고 실행 해보겠습니다 감사합니다 ㅎㅎ 에디터는 브라켓 사용 중입니다.
