Как взять текст инпута, и поместить его в ссылку?

Question

[вовчек]

Вообщем, есть ссылка: https://api.openweathermap.org/data/2.5/weather?q=...

и инпут в котом должно вводится название города, после сабмита формы нужно чтобы в ссылке менялось в q = ${city} на название города которое мы ввели в input.

Код js:

const form = document.querySelector('.form').addEventListener('submit', (e) => {
    e.preventDefault()
})

const btn = document.querySelector('.btn')
const titleOfCity = document.querySelector('.form-titleOfCity')
const nameCity = document.querySelector('.nameCity')
const tempCity = document.querySelector('.tempCity')
const windCity = document.querySelector('.windCity')
const humidityCity = document.querySelector('.humidityCity')


fetch('https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=0d54e2c99f5135987d576129179b6bf11')
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        console.log(data)

        btn.addEventListener('click', (e) => {
            titleOfCity.textContent = `${data.sys.country}, ${data.name}`
            nameCity.textContent = data.name
            tempCity.textContent = `${Math.round(data.main.temp / 10)}°`
            windCity.textContent = `${Math.round(data.wind.speed)} м/с`
            humidityCity.textContent = `${data.main.humidity}%`

        })
    });

Comments

[вовчек]

Только не нужно писать что у меня ужасный код, я только начал изучать Js.

[Александр]

Вова Балтиев, а у самого есть какие-то идеи?

[вовчек]

Александр, нет, с таким не сталкивался, а в гугле ничего не нашел.

[Александр]

Вова Балтиев, ноомально задать вопрос - это уже половина ответа.

Answer 1

[Sergo Zar]

var link = 'https://api.openweathermap.org/data/2.5/weather?q='+nameCity.value+'&appid=0d54e2c99f5135987d576129179b6bf11';

Или может:

var input = document.querySelector("input");
var btn = document.querySelector(".btn");
var link = "";

btn.addEventListener("click", function(){
link = 'https://api.openweathermap.org/data/2.5/weather?q='+input.value+'&appid=0d54e2c99f5135987d576129179b6bf11';
});
console.log(link);

Comments

[вовчек]

Что то похожее, однако как только страница перезагружается, fetch сразу читает nameCity.value, и выдает ошибку, т.к. в инпуте еще ничего нет.

[вовчек]

Все, решил проблему, спасибо.

[Sergo Zar]

Вова Балтиев, всегда рад помочь