안녕하세요 상품필터 부분 질문이 있습니다.

강사님 답변 감사드립니다. 한참보고 또 만져봤는데 정말 모르겠습니다..  우선 답변달아주신것도 잘 이해가 가지않거나, 이해가 가는것은 해봤는데 안되서 다시 답변에 대해서 질문드립니다. 

시간 써주셔서 감사합니다.

질문 1 답변에 대해서 :  

함수 밖에서 정의한 변수는 안에서도 동작한다고 하신 말은 이해가 갑니다. 하지만, 

 NEWProducts 라는 새 변수를 각각의 가격필터를 하는  filter 함수 내에서 각각의 필터조건에 부합하는 NEWProducts라는 변수를 정의했는데 (함수내에서) 이렇게 각각 정의된  NEWProducts이기 때문에 함수 밖에서 정의할 수 없지 않나요? 

    하나로 예를 들면 아래와같이 NEWProducts 필터조건이 다르니까요..

  $('#price_20to40').click(function(){

      ProductsGroup.innerHTML = '';

      const NEWProducts = products.filter(a => 20 < a.price && a.price< 40);

      console.log(NEWProducts);

      NEWProducts.forEach(function(a){

          let template = `

          <div class="products">

              <img src="https://via.placeholder.com/600">

              <div class="products-body">

                  <h5 class="product-title">${a.title}</h5>

                  <p> <span class="PDSpan">Price: $ ${a.price}</span> </p>

                  <button class="product-btn btn-danger">Order</button>

              </div>

          </div>

          `;

          ProductsGroup.insertAdjacentHTML("beforeend", template);

      })

  })

그래서  

(1. 가격필터를 했을 경우 newProduct 이런 변수가 생길거같은데 

newProduct가 있을 경우 그 변수로 sort하라고 코드를 짜는것이 어떨까요 

아니면 2, 가격필터를 먹였는지 안먹였는지 여부를 어디다 저장해놓는 것도 좋겠군요 )

여기서 저는 1번으로 이중필터가 되게끔 하려고 했던건데, 필터함수에 각각있는 NEWProducts 라는 변수를 sort 를 이용해 오름차순,내림차순하는 함수에서는 어떻게  NEWProducts안에 있는 함수로 sort하라고 짤 수 있나요?

새로 NEWProducts를 sort안에서 또 정의해야하나요? 이게 맞다고해도 어떻게짜야될지 감이 안옵니다ㅠㅠ

그리고 2번도 어떻게 코드 짜는지 궁금한데 알 수 있을까요?

 

 

질문 2 답변에 대해서 :  
2, 2-1 

이부분도 1번과 연관이 있을 것도 같아 다시 질문드려요. 

제가 정의한 변수는 

  let ProductTitle = document.getElementsByClassName('product-title');

  let ProductSpan = document.getElementsByClassName('PDSpan');

이랬구요. 하지만, html을 자바스크립트에 동적으로 생성하면서 html에 해당하는 부분은 다 주석처리를 했어요. 

그래서  ProductTitle[0]라는게 없다고 나오는게 말씀처럼 맞는 것 같아요.

강사님께서 반복문 안에서 셀렉터를 새로 쓰시라고 하셨는데, 

아래와 같이 했을 때 버튼을 누르면 

“Uncaught TypeError: Cannot set properties of undefined (setting 'innerHTML')

    at HTMLButtonElement.<anonymous> (sub.js:346:35)

(anonymous) @ sub.js:346”

라고 뜹니다. 그러면서 필터가 전체 항목 내에서 가격이 낮은 순으로 떠요..

필터로 걸러진 상품들 안에서 필터가 되야되는데 말이죠..

1번과 2번 질문 다 해결되면 이중필터가 잘될것 같은데 ㅜㅜ잘 모르겠습니다. 제가 쓴 반복문은 아래와 같아요.

 

  // Price 

  sortByBtnPriceLow.addEventListener('click', function(){

      

      products.sort(function(a,b){

      return a.price - b.price

      })

      

      for (let i = 0; i < 5; i++){

// 반복문 안에서 셀렉터를 새로 쓴게 아래와 같은 것 아닌가요? 이러면 안되더라구요ㅜ 뭐가 문제일까요

        // let ProductTitle = document.getElementsByClassName('product-title')[i];

        // let ProductSpan = document.getElementsByClassName('PDSpan')[i];

          ProductTitle[i].innerHTML = products[i].title;

          ProductSpan[i].textContent = ('Price: $ ' + products[i].price);

        }

  })

 

 

질문 3 답변에 대해서 :  

 

Template 함수를 만들어 넣었는데 적용이 안됩니다. 어떤부분을 수정해야할까요? 템플릿에 있는${a.title}와 ${a.price}이 지정되지 않아서(?) 그런거 같은데 그래서 어떻게 해야 되는지가 궁금합니다..

// function template

  function template() {

    `

    <div class="products">

        <img src="https://via.placeholder.com/600">

        <div class="products-body">

            <h5 class="product-title">${a.title}</h5>

            <p> <span class="PDSpan">Price: $ ${a.price}</span> </p>

            <button class="product-btn btn-danger">Order</button>

        </div>

    </div>

    `;

  }

const filterByBtnUpto20 = document.getElementsByClassName('filterby_price_under20')[0];

  // less than 20 products - Javascripts

  filterByBtnUpto20.addEventListener('click', function(){

      ProductsGroup.innerHTML = '';

      const NEWProducts = products.filter(function(a){

          return a.price <= 20

      })

      NEWProducts.forEach(function(a){

          ProductsGroup.insertAdjacentHTML("beforeend", template());

          // $('#products-group').append(template());

      })

  })