I want to access the inner text or inner html of specific cities that I am adding to my page. Since I entered 'moscow' first (then san diego, then oakland) getElementById is only picking up 'moscow'. Based on how my page is set up, I want to access the city name that is next to the 'navigate' button. Clicking on 'oakland' is rendering as 'moscow'. here are some photos: looks like the page is mapping out an array of objects. i want to access oakland if i click on oakland... and my coode shown here, with the .map happening in the return section
@Lokendra Soni pointed me in the right direction. I got it to work by swapping .getAttribute("value") with .textContent. But the real trick was to utilize the item's unique ID in their tag's id names (for ex. <p id={displayedCity-${item.id}}>)
document.getElementById() always returns the first encountered element matching the provided id, that's why you're receiving Moscow as you've entered it first.
If you want to fetch the data from id attribute, make id of all the items unique.
Try modifying your goToCity method like this:
const goToCity = (id) => {
const x = document.getElementById(`displayedCity-${id}`).getAttribute("value");
navigate(`/${x}`);
}
Then modify your HTML:
...
<p id=`displayedCity-${item.id}` value={`YOUR VALUE`}>{item.item}</p>
<button className="button" onClick={()=>goToCity(item.id)}>navigate</button>
...