간단한 HTML 양식으로 JS 및 JSON을 사용하여 가격 업데이트

Question

우편번호를 입력하고 양식을 제출한 다음 JavaScript를 사용하여 우편번호의 처음 4자가 일부 JSON 데이터의 우편번호와 일치하는지 확인하는 설정을 만들려고 합니다. 을 탭한 다음 페이지에서 가격을 변경하세요. 이는 Shopify 사이트용이므로 구현 방법에 대한 도움이 필요할 것입니다.

현재 양식을 제출하면 페이지가 새로 고쳐지지만 아무 일도 일어나지 않습니다.

아직 초기 단계에 있는 현재까지 얻은 정보는 다음과 같습니다.

비동기 함수 checkZones() {
  // const requestURL = "{{ 'zones.json' | 자산_url }}";
  // const 요청 = 새로운 Request(requestURL);
  //const 응답 = fetch(요청)을 기다립니다;
  // const zones = 응답을 기다립니다.json();
  const 영역 = [{
      "name": "영역 1",
      "우편번호": [
        "테스트1",
        "테스트2",
        "테스트3",
        "테스트4",
        "테스트5",
        "테스트6",
        "테스트7",
        "테스트8",
        "테스트9",
        "테스트10"
      ],
      "비용": 10.8
    },
    {
      "name": "영역 2",
      "우편번호": [
        "테스트12",
        "테스트13",
        "테스트14",
        "테스트15",
        "테스트16",
        "테스트17",
        "테스트18",
        "테스트19",
        "테스트18",
        "테스트19",
        "테스트20"
      ],
      "비용": 16.8
    }
  ]
  console.log(영역);
  업데이트가격()
}

함수 updatePrice(zone) {
  const postcodeFormInput = document.querySelector('#postcodeForm input[type="text]"');

  const 우편번호 = zone.postcodes;
  for (우편번호의 상수 코드) {
    if (postcodeFormInput.value.contains(code)) {
      const productPrice = document.querySelector('#ProductPrice-product-template').textContent;
      if (코드 === "test1") {
        const newPrice = productPrice + zone.cost;
        document.querySelector('#ProductPrice-product-template').innerHTML = newPrice;
      }
    }
  }
}

<form onsubmit="checkZones()" id="postcodeForm">
  <입력 유형="텍스트">
  <button type="submit">비용 업데이트</button>
</form><span id="ProductPrice-product-template">0.00</span>

Answer 1

여기에 몇 가지 질문이 있습니다

다음 질문 중 일부:

1. 제출 이벤트 핸들러를 사용하여 제출 방지
2. 필요한 기능에 영역을 전달하고 있지 않습니다
3. 계산에 사용된 금액이 문자열(innerText 및 .value에서 가져온 문자열)이 아닌 숫자인지 확인해야 합니다. 저는 달러 더하기 기호 +将其转换为数字或0（如果未定义），并使用条件链接运算符?.를 사용하여 누락된 우편번호를 처리했습니다.
4. 찾기를 사용하여 일련의 우편번호가 포함된 지역을 찾을 수 있습니다

으아악 으아악