자바스크립트 캐러셀 질문드립니다!

[Gyeong a Kim]

1번 2번 3번 버튼을 눌렀을 시 각자 위치로 잘 이동이 되는데,
다음 버튼을 누르면 계속 2번 사진으로 이동합니다.

다음 버튼 누를 때 console.log(지금사진) 로 확인하면
2로만 찍히는데, 오류 확인 부탁드립니다.!

(1,2,3번 버튼 누를 때 이동하는 코드를 그대로 복붙 했기 때문에 코드 오타는 없는 것 같은데 작동이 안 되어서 질문드립니다.!
지금사진 변수를 콜백함수 밖에 쓰든, 내부에 쓰든 console.log(지금사진)은 동일하게 2가 나옵니다.



//다음 버튼 누르면 캐러셀 이동
let 지금사진 = 1;

document.querySelector(".next").addEventListener("click", function () {
  if ((지금사진 = 1)) {
    document.querySelector(".slide-container").style.transform =
      "translateX(-100vw)";
    지금사진 += 1;
    console.log(지금사진); //2
  } else if ((지금사진 = 2)) {
    document.querySelector(".slide-container").style.transform =
      "translateX(-200vw)";
    지금사진 += 1;
    console.log(지금사진); //2
  } else if ((지금사진 = 3)) {
    document.querySelector(".slide-container").style.transform =
      "translateX(0)";
    지금사진 = 1;
    console.log(지금사진); //2
  }
});

[codingapple]

같은지 비교하려면 등호2개를 씁시다

[Gyeong a Kim]

감사합니다!!!

선생님, 추가로 리액트로 개인 프로젝트를 진행 중인데
날씨 API를 수신하는 과정 중 발생한 오류를 해결하고 싶습니다.
ES6 문법 강의 중 어느 부분을 참고하면 좋을지,
어떤 개념이 부족한지 질문드립니다 .!

혹은 구현된 코드를 조금 더 개선 시킬 수 있는 개념을 질문드립니다.! ㅠㅠ


< 구현 목표 >
- 현재 날씨, 3시간 후의 날씨, 6시간 후의 날씨를 날씨 API를 이용해 불러온다.

< 상황 >
1) 날씨 API와 연동하기 (완료)
https://openweathermap.org/forecast5
위 사이트에서 5일간, 3시간씩 텀을 두고 불러오는 날씨 정보를 불러왔습니다.

2) 현재 날씨 (완료) , 3시간 후의 날씨 (null) , 6시간 후의 날씨 (null)
fetch 함수를 이용해 받아왔는데,
아무래도 비동기적으로 정보가 불러와지다보니

현재 날씨는 받아지고,
3시간 후의 날씨부터는 null로 뜹니다.

< 코드 >

// 날씨 API와 현재 위치를 연동
function onGeolocation(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  const url = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;

// fetch를 이용해 정보 받아오기 
 fetch(url)
    .then((response) => response.json())
    .then((data) => {
      const city = document.querySelector(".weather-now h2");
      city.innerText = data.name;
//data.list[2] : 현재 시간의 정보 : 수신 완료 (화면에 출력됨)
      const weather_now = document.querySelector(".weather-now h3");
      weather_now.innerHTML = data.list[2].weather[0].main;
      const detail_now = document.querySelector(".weather-now h5");
      detail_now.innerHTML = data.list[2].weather[0].description;
      const temp_now = document.querySelector(".weather-now h4");
      temp_now.innerHTML = data.list[2].main.temp;

//data.list[3] : 3시간 후의 정보 : 오류 (해당 정보를 받아오지 못한 것으로 보임. 화면에도 출력X)
       Uncaught (in promise) TypeError: Cannot set properties of null (setting 'innerHTML')

      const weather_after3h = document.querySelector(
        ".weather-after:first-child h3"
      );
      weather_after3h.innerHTML = data.list[3].weather[0].main;
      const weatherDetail_after3h = document.querySelector(
        ".weather-after:first-child h4"
      );
      weatherDetail_after3h.innerHTML = data.list[3].weather[0].description;
      const time_after3h = document.querySelector(
        ".weather-after:first-child p"
      );
      time_after3h.innerHTML = data.list[3].dt_txt;
      const temp_after3h = document.querySelector(
        ".weather-after:first-child h4:last-child"
      );
      temp_after3h.innerHTML = data.list[3].main.temp;

[codingapple]

innerHTML 왼쪽이 비어있다는군요 
".weather-after:first-child h3" 이게 생성되기도 전에 셀렉터로 찾으라고 코드짰나봅니다 

[Gyeong a Kim]

다시 확인해보니

<div class="circle-inner-box weather-after">
              <h3>Sunny</h3>
              <h4>Very Hot</h4>
              <p>Afternoon temperature</p>
              <h4>23<b>o</b></h4>
</div>
<div class="circle-inner-box weather-after">
              <h3>Lightning</h3>
              <h4>Heavy rain</h4>
              <p>Night temperature</p>
              <h4>18<b>o</b></h4>
</div>

여기에서 첫 번째 .weather-after의 h3를 선택하고 싶었는데,
희망사항을 셀렉터로 넣었다는 것을 확인했습니다!!


(변경전) document.querySelector(".weather-after:first-child h3")
 > (변경후) document.querySelectorAll(".weather-after h3")[0]

이렇게 수정하니 완료가 되었습니다.!
감사합니다 !

======
선생님, 위 구조를 보면,
2개의 .weather-after 안에 2개씩 h4가 있는 구조입니다.

두 번째 .weather-after의 첫번째 h4, 두번째 h4를 선택하고 싶은데,
querySelectorAll을 이용하면
전체에서 3번째, 4번째로 찾아지는 것을 확인했습니다.
(.weather-after의 순서와 상관없이)

두번째 .weather-after에서 1번째, 2번째 찾아줘
라고 찾을 수 있는 방법이 있을까요?

(같은 디자인을 위해서 class를 동일하게 사용했습니다!)

document.querySelectorAll('.weather-after')[1].querySelectorAll('.h4')[0] 로 하면
undefined 로 출력이 되는 것을 확인했습니다 .!

[codingapple]

 document.querySelectorAll(".weather-after h3")[3] 합시다

[글쓴이]

글