javascript / jquery 실시간 img src, text 바꾸기

<!--생략-->

<div id='timerBox' class="timerBox">
	<a id="time" name="time" class="time">00:00:00</a>
</div>

<!--생략-->

<img src="{% static 'img/timeImg/pizza.png' %}" id="timeImg" name="timeImg"
	class="figure-img img-fluid rounded" alt="timeImg">
<figcaption class="figure-caption" id="mainTitle" name="subTitle">피자한판</figcaption>
<figcaption class="figure-caption" id="subTitle" name="subTitle">맛있는 피자를 구울 만큼의 시간이군요!</figcaption>

<!--생략-->

 

현재 저는 해당 이미지를 html에서 사용하고 있으며

 

특정 값으로 바뀌게 된다면

 

이미지를 바꾸는 작업을 하고 있습니다.

 

          if (document.getElementById("time").innerHTML=='00:00:02'){
            document.getElementById('timeImg').src="{% static 'img/timeImg/popkon.png' %}"
            $("#mainTitle").text("안녕하세요!");

          } else if (document.getElementById("time").innerHTML=='00:00:04') {
            document.getElementById('timeImg').src="{% static 'img/timeImg/shower.png' %}"
          }

 

 

document.getElementById("time").innerHTML함수를 사용하여

 

만약에 time이란 값이 00:00:02가 되었을때

 

document.getElementById('timeImg').src = "{% static 'img/timeImg/popkon.png' %}"

 

timeimg란 값의 src를 {% static 'img/timeImg/popkon.png' %}로 바꾸어라

 

입니다.

 

또한 바로 아래에 mainTitle은 jquery를 이용하였으며

 

00:00:02가 되면

 

mainTitle의 text를 "안녕하세요!" 로 바꾸게 됩니다.