तो मैं छुट्टी खोजक "ऐप" बना रहा हूं और मैं बटन रखना चाहता हूं जहां कोई अपने देश के नाम पर क्लिक करता है, यह देश के मूल्य को एपीआई स्ट्रिंग में इनपुट करता है।

मैंने जो किया वह सभी बटनों पर लूप था और लक्ष्य मान को एक चर में सहेजता था जिसे मैंने एपीआई में जोड़ा था। बात यह है कि जब मैं एपीआई प्राप्त किए गए कंसोल में देखता हूं, जहां देश कोड माना जाता है तो यह "अपरिभाषित" कहता है।

मैं थोड़ा उलझन में हूं कि अगर आपको समाधान मिल जाए तो कृपया इसे समझाएं।

  let countrySelect = document.getElementById('country-select');
  let holidayName = document.getElementById('holiday-name');
  let holidayDesc = document.getElementById('holiday-desc');
  let holidayDate = document.getElementById('holiday-date');
  let holidayType = document.getElementById('holiday-type');
  let info = document.querySelector('.cell');
  let buttonValue;

  // get button values
    const button = document.querySelectorAll("button").forEach(
      button => button.addEventListener('click', function(e) {
        buttonValue = e.target.value;
        console.log(buttonValue)
      })
    );


// api url
  const api = `https://calendarific.com/api/v2/holidays?&api_key=<api key>&country=${buttonValue}&year=2020`;


// When the button is clicked fetch results
countrySelect.addEventListener('click', function() {
  fetch(api)
  .then(res => res.json())
      .then(data => {

        var apiResponse = data.response;


          console.log(apiResponse);
      }, networkError => {
        alert(networkError)
      })
  })
0
Nick 14 अप्रैल 2020, 04:07

1 उत्तर

सबसे बढ़िया उत्तर

आपको अपने api वेरिएबल को countrySelect ईवेंट श्रोता के भीतर परिभाषित/फिर से परिभाषित करने की आवश्यकता है।

फिलहाल इसे किसी भी बटन पर क्लिक करने से पहले परिभाषित किया जा रहा है, इसलिए buttonValue अपरिभाषित है। इसलिए यदि आपका buttonValue बटन क्लिक किए जाने की प्रतिक्रिया में बदल जाता है, तो api वैरिएबल वैसा ही रहता है जैसा वह था, अर्थात। country=undefined के साथ।

let countrySelect = document.getElementById('country-select');
let buttonValue;
 
const button = document.querySelectorAll("button").forEach(
    button => button.addEventListener('click', function(e) {
      buttonValue = e.target.value;
      console.log(buttonValue);
    })
  );

// When the button is clicked fetch results
countrySelect.addEventListener('click', function() {
	const api = `https://calendarific.com/api/v2/holidays?&api_key=<api key>&country=${buttonValue}&year=2020`;
	
	console.log(api);
});
#country-select {
  border: 1px solid green;
  color: green;
  display: inline-block;
  cursor: pointer;
}
<button value='uk'>
  UK
</button>

<button value ='us'>
  US
</button>

<div id='country-select'>
  Select Country
</div>
1
royranger 14 अप्रैल 2020, 01:47