Ways in which the user can modify the city name within this inquiry

Question

Ways in which the user can modify the city name within this inquiry

I am just beginning to learn JavaScript and I am struggling to figure out how to allow the user to change the city name in this request. Currently, it works when I manually input the city name in the code (e.g., askWeather.open("GET", "url.../london")), but how can I enable the user to input their desired city?

Any help would be greatly appreciated.

askWeather.onreadystatechange = function () {
    if (this.readyState === XMLHttpRequest.DONE && this.status == 200) {
        var response = JSON.parse(this.responseText);
        let resp = document.getElementById('result');
        let ask = document.getElementById('btn');
        ask.addEventListener('click', function () {
            resp.innerHTML = response.current_condition.condition;
        });
    }
};
askWeather.open("GET", "https://www.prevision-meteo.ch/services/json/lille");
askWeather.send();

javascript ajax api request

Answer 1

Answer №1

For tracking the value that is typed and sending a request, you will need two event listeners.

Here's one method to allow the user to change the city:

let city = 'london'; // Default value set if user doesn't input anything
document.getElementById('city').addEventListener('keyup', (e) => {
    city = e.target.value;  
});

document.getElementById('send').addEventListener('click', () => {
    askWeather.open("GET", `url.../${city}`)
    askWeather.send();
});

<input id="city" type="text">
<button id="send">Send Request</button>

An alternative approach would be using a simple form with just one event listener:

let city = 'london';
document.getElementById('my-form').addEventListener('submit', () => {
  city = document.getElementById('city').value;
  askWeather.open("GET", `url.../${city}`)
  askWeather.send();
});

<form id="my-form" action="">
  <input id="city" type="text">
  <input type="submit" id="send">
</form>

Answer 2

For tracking the value that is typed and sending a request, you will need two event listeners.

Here's one method to allow the user to change the city:

let city = 'london'; // Default value set if user doesn't input anything
document.getElementById('city').addEventListener('keyup', (e) => {
    city = e.target.value;  
});

document.getElementById('send').addEventListener('click', () => {
    askWeather.open("GET", `url.../${city}`)
    askWeather.send();
});

<input id="city" type="text">
<button id="send">Send Request</button>

An alternative approach would be using a simple form with just one event listener:

let city = 'london';
document.getElementById('my-form').addEventListener('submit', () => {
  city = document.getElementById('city').value;
  askWeather.open("GET", `url.../${city}`)
  askWeather.send();
});

<form id="my-form" action="">
  <input id="city" type="text">
  <input type="submit" id="send">
</form>

Answer 3

Answer №2

Set up a variable to store the name of a city. This value can be assigned from various sources, such as user input.

const selectedCity = 'paris';
fetchWeatherData.open("GET", `https://www.weather-forecast.com/api/json/${selectedCity}`);

Answer 4

Set up a variable to store the name of a city. This value can be assigned from various sources, such as user input.

const selectedCity = 'paris';
fetchWeatherData.open("GET", `https://www.weather-forecast.com/api/json/${selectedCity}`);

Ways in which the user can modify the city name within this inquiry

Answer №1

Answer №2

Similar questions

How can mongoose be used to modify user information in a database?

AngularJS flexible route parameter

What is the best way to keep track of choices made in 'mat-list-option' while using 'cdk-virtual-scroll-viewport'?

WordPress header causing issues with Document.write()

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

When using vue.js(2), the function window.scrollY consistently returns a value of 0

Tips for dynamically updating an HTML value with Javascript

Utilize AJAX and jQuery to seamlessly submit a form

Creating types for React.ComponentType<P> in Material-UI using TypeScript

Ways to safeguard your API endpoint

Issue with setTimeout function when used in conjunction with an ajax call

HTML5 Mouse Canvas

Struggling to capture an error generated by Sequelize within a universal Middleware block

What is the proper way to provide login information for a webservice through a jquery ajax request?

Connect a series of numerical input fields in Vue.js

Observing the completion of a subscriber function

Upon refreshing the page, an inline script was not executed due to its violation of the Content Security Policy directive: "script-src 'self'"

What is the best way to utilize eslint in Vue components?

Troubleshooting jQuery masonry problem related to initial display and height settings

I aim to decrease the number of decimal places in the code provided below