JavaScript保留关键字未正确通过函数传递

Question

I'm attempting to build a page where a user can mark cities on a map that they have visited, storing the data on Firebase for future visits. The issue I've run into is with cities such as "New York" or "New Orleans" that begin with reserved keywords. This is the function that runs on page load to adjust previously visited cities to be marked on the map as visited with a checkmark image.

  function adjustMarkers() {
  database.ref("users/" + uid + "/citiesVisited").once("value").then(function(userSnapshot){
    userSnap = userSnapshot.val();
    citiesArray = Object.entries(userSnap);
    for (var [cityName, visited] of citiesArray) {
        if (visited == "yes") {
            $("#" + cityName).attr("src", "assets/images/checkmark.png")
            $("#" + cityName).attr("data-clicked", "yes")
        }
    }
})

}

When this function runs, cities like New York, New Orleans, Washington DC, and Los Angeles do not get correctly updated. I realize that I can store these city names in Firebase as other names like NY, NO, DC, and LA to get this to run properly. But I would like very much to keep them stored with their proper names for other display purposes. Is there a workaround I can use on this side of things?

First post here, I apologize if this post breaks any rules. I searched a fair amount before posting this but may have missed a similar previous question.

Edit: On further thinking, this might not have anything to do with Reserved Words at all, and may just be all cities that have multiple words. I will delete this if the solution becomes immediately apparent to me.

Answer 1

The problem is not with Javascript reserved keywords - the problem is that, if cityName has spaces, then, for example, if it's New York :

$("#" + cityName)

will resolve to

$("#New York")

which means: find an element whose tagName is "York" which is a descendant of an element whose ID is "New".

 $("#New York").text('foo'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="New"> <York> ???? </York> </div> 

Any cityName with spaces will not function as expected.

An easy fix would be to replace all spaces with dashes, in the HTML (and either in the database as well, or before passing cityName to $ ), so that it resolves to something like

$("#New-York")

If a database contains data that includes Javascript reserved words, probably the only time you'd have to worry about that would be if you're using eval or one of its equivalents - it shouldn't ever be something to worry about otherwise, I think.