0

Alguém poderia me ajudar a entender o porque não consigo localizar o regiaoNome no objeto.

<img src="mapa.jpg" usemap="#image-map" class="img__map">

const map = document.querySelector('.mapa');

const contentMap = {
    sudeste : {
        title : 'Sudeste',
        conteudo : "Lorem ipsum"
    },
    norte : {
        title : 'Norte',
        conteudo : 'Lorem'
    }
}

map.addEventListener('click', function(e){
    e.preventDefault();

    const region = e.target;

    //pego o valor do alt do mapa
    let regiaoNome = region.alt


    //adiciono o valor do mapa com base no nome do alt clicado
    console.log(contentMap.regiaoNome.title)

})
3
  • 3
    Tá confusa a pergunta. Você usa document.querySelector('.mapa') mas a classe do exemplo é img__map; Você quer pegar a propriedade alt mas o HTML nem tem esse atributo. Nada está fazendo sentido. Você poderia editar sua pergunta e explicar melhor o que quer? 12/11/2018 às 13:55
  • 1
    Se entendi bem você deseja acessar a propriedade title através da key, tente: contentMap[regiaoNome].title
    – Marconi
    12/11/2018 às 14:06
  • pq nao existe contentMap.regiaoNome, apenas contentMap.sudeste e contentMap.norte. O que eu conesguir entender na sua pergunta
    – HudsonPH
    12/11/2018 às 14:51

1 Resposta 1

0

ali no console.log() coloque assim para acessar a propriedade do objeto:

console.log(contentMap[regiaoNome].title)

feito isso, ele irá acessar a região no objeto contentMap.

por exemplo:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const map = document.querySelector('.mapa');

  const contentMap = {
    sudeste: {
      title: 'Sudeste. Agora nao vai retornar undefined',
      conteudo: "Lorem ipsum"
    },
    norte: {
      title: 'Norte',
      conteudo: 'Lorem'
    }
  }

  map.addEventListener('click', function (e) {
    e.preventDefault();

    const region = e.target;

    //pego o valor do alt do mapa
    let regiaoNome = region.alt;


    //adiciono o valor do mapa com base no nome do alt clicado
    console.log(contentMap[regiaoNome].title)

  })
})

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .