Quiero acceder al texto interno o al html interno de ciudades específicas que estoy agregando a mi página. Dado que ingresé 'moscow' primero (luego san diego, luego oakland) getElementById solo está seleccionando 'moscow'. En función de cómo esté configurada mi página, quiero acceder al nombre de la ciudad que se encuentra junto al botón 'navegar'. Al hacer clic en 'oakland' se representa como 'moscow'. aquí hay algunas fotos: parece que la página está mapeando una serie de objetos. quiero acceder a oakland si hago clic en oakland... y mi código se muestra aquí, con el mapa en la sección de retorno
@Lokendra Soni me indicó la dirección correcta. Lo hice funcionar intercambiando .getAttribute("value") con .textContent. Pero el verdadero truco consistía en utilizar la identificación única del elemento en los nombres de identificación de sus etiquetas (por ejemplo, <p id={ displayedCity-${item.id} }>)
document.getElementById() siempre devuelve el primer elemento encontrado que coincide con la identificación proporcionada, es por eso que está recibiendo Moscú como lo ingresó primero.
Si desea obtener los datos del atributo id, haga que la identificación de todos los elementos sea única.
Intente modificar su método goToCity de esta manera:
const goToCity = (id) => { const x = document.getElementById(`displayedCity-${id}`).getAttribute("value"); navigate(`/${x}`); }Luego modifica tu HTML:
... <p id=`displayedCity-${item.id}` value={`YOUR VALUE`}>{item.item}</p> <button className="button" onClick={()=>goToCity(item.id)}>navigate</button> ...