슬라이드 질문 입니다.

슬라이드 질문 입니다.

QA

슬라이드 질문 입니다.

답변 3

본문

질문자의 문제 점

​

* 사용하고자 하는 창에서 (즉 전체 코드에서) 스크립트를 연동하여 작동을 하면 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);

#php #그누보드4 #그누커머스 #영카트5 #그누보드5

이 질문에 댓글 쓰기 :

답변 3

아톰빤스 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

121.♡.♡.24

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 불러오기전에 상단에 사용되어서 찾을수 없다고 오류를 뱉어내는거 같습니다.
^ ^

Big1 홈페이지 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

220.♡.♡.149

에디터를 어떤 거 쓰시나요? 
안보이는 문자가 스크립트에 포함된 거 같은데요 

https://en.wikipedia.org/wiki/Zero-width_space

​ 

 

되는 페이지가 있다고 하니 

이게 문제인지는 모르겠지만 

var imageIndex=0;

​

function changeImage(){

 

이 사이의 공백줄을 지워보세요

 

 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,178
문의 PC 버전
© SIRSOFT
현재 페이지 제일 처음으로