Use a variable for JQuery element selector

Question

I have an input field to enter a city name - the on click function for that fills in certain div's. I want to local storage every input (maybe in an array) and every input value dynamically gets created into a button. The buttons are the 'city' name inputs - on click of these buttons will repopulate the div data with that city name and its' info. I am saving the city input as a variable and using that city name to be the id of each button. So how can I use a variable as my query selector?

HTML

<div class="city-search">Search For A City: 
            <input type="text" id="cityInput" style="text-transform: uppercase" />
            <button class="searchBtn" type="submit"><span class="oi oi-magnifying-glass"></span></button>

</div>

<!-- This shows the search history and is reclickable -->
<div class="city-history" id="city-history">

</div>

<div>
    <h2 id="city"></h2>
</div>

JQuery

$(".searchBtn").on('click', function getWeather () {
    var cityName = $('#cityInput').val().toUpperCase();
    $("#city").text("The weather in " + cityName);

 // Create buttons for city inputs
    var cityHistory = function() {
        var cityH = document.createElement("button");
        cityH.textContent = cityName;
        cityH.setAttribute("id", cityName);
        var history = document.getElementById("city-history");
        history.appendChild(cityH);
     }
    cityHistory();
 // Update city name with name on button
 $(`#${cityName}`).on('click', function historyWeather () {
      $('#city').text("The weather in " + cityName);
});

It seems you already do use a variable as query selector, so what is your question exactly? What is the expected vs. actual result? — CherryDT
– CherryDT, Commented Apr 26, 2020 at 23:05
It's not working. When I click on the button, it doesn't update the $("#city"), nor does console.log(cityName) show the city name of the button. — DeAnna
– DeAnna, Commented Apr 26, 2020 at 23:07
Have you tried doing something like $('#'+cityName).on(...); as the query selector? That's what I usually do. — Zeke
– Zeke, Commented Apr 26, 2020 at 23:13
You're using an ID (#city) selector, but your element is h2.city. — emsoff
– emsoff, Commented Apr 26, 2020 at 23:13
What specifically isn't working? jsfiddle.net/w62f7k0n/3. I don't know if you're actually missing the closing }) in your code, but that will definitely break everything. — emsoff
– emsoff, Commented Apr 26, 2020 at 23:19

emsoff · Accepted Answer · 2020-04-26 23:32:16Z

3

This fiddle achieves what you want. As mentioned in the comments, you're using an ID selector, when your target element only has a class. Changing $('#city') to $('.city') will work. Class selectors in jQuery are . and ID selectors are #. They are not interchangeable.

edited Apr 26, 2020 at 23:32

answered Apr 26, 2020 at 23:24

emsoff

1,6052 gold badges12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zeke Over a year ago

Actually, it can still be done using an ID selector. I updated that in the JSFiddle. The actual problem is inside the last click event function. But this answer is still true.

Collectives™ on Stack Overflow

Use a variable for JQuery element selector

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related