Modifier l'ID div et le contenu innerHTML avec javascript

Bonjour, j'essaie de modifier une carte google et un texte h3 avec javascript, mais cela ne fonctionne pas. Ce que je veux faire est d'afficher des cartes et des en-têtes différents, donc, fondamentalement, je veux remplacer l'ID <div id="map"></div> par id="map2" pour afficher l'emplacement de Berlin au lieu de Los Angeles. ~~Aussi je veux remplacer le texte <h3 div="textChange">Worlds Finals Season 3 and 6</h3> avec "Worlds Season 5".~~ Modifier l'ID div et le contenu innerHTML avec javascript

Voici le HTML:

<article> 
<div class="container"> 
<button onclick="changediv()">Season 5</button> 
<h3 id="textChange">Worlds Finals Season 3 and 6</h3> 
<div id="map"></div> 
</div> 
</article>

Voici le Javascript:

function initMap() { 
    var losAngeles = { 
     lat: 34.038037, 
     lng: -118.244753 
    }; 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 4, 
     center: losAngeles 
    }); 
    var marker = new google.maps.Marker({ 
     position: losAngeles, 
     map: map 
    }); 

    var berlin = { 
     lat: 52.518894, 
     lng: 13.407413 
    }; 
    var map2 = new google.maps.Map(document.getElementById('map2'), { 
     zoom: 4, 
     center: berlin 
    }); 

function changediv() { 
    if (document.getElementById("map")) { 
     document.getElementById("textChange").innerHTML = "Worlds Finals Season 5";   
     document.getElementById("map").id = "map2"; 
    } 
}

EDIT: "onlick" "div" et paranthèses sont ajoutés, alors maintenant les changements de texte h3, mais la carte Je ne changerai toujours pas, dois-je relaod la page pour que cela fonctionne? En utilisant google maps api.

Source

2017-04-24 Robin

devrait-il pas être 'onclick = "changediv()"'? Je n'ai jamais entendu parler d'un événement lick –

1) il y a une faute de frappe ici:

<h3 div="textChange">Worlds Finals Season 3 and 6</h3>

changement à:

<h3 id="textChange">Worlds Finals Season 3 and 6</h3>

2) Comme mentionné dans le commentaire il y a une autre faute de frappe dans le code HTML

<button onlick="changediv">Season 5</button>

Lorsque vous déclenchez un clic vous souhaitez que la fonction soit invoquée, vous avez oublié la parenthèse.

<button onlick="changediv()">Season 5</button>

3) last but not least, la carte. . Les instances de mappage selon le document doivent être réutilisées. Au lieu de créer une nouvelle instance, vous devez simplement modifier l'emplacement.

function changeDiv(){ 
    if (document.getElementById("map")) { 
    document.getElementById("textChange").innerHTML = "Worlds Finals Season5";   
    var location = new google.maps.LatLng(berlin.lat, berlin.lng); 
    map.panTo(location) 
    } 

}

Source

2017-04-24 15:11:41 Karim

Oh, même sur l'attribut 'id' ils ont réussi à se tromper. J'ai remarqué qu'ils essayent de lier la fonction à un événement onlick (donc vous voudrez peut-être l'ajouter à votre réponse) –

oui vous avez parfaitement raison. Je vais modifier ma réponse – Karim

J'ai honnêtement pas vu les fautes de frappe même après 30 minutes de regarder, cela m'a beaucoup aidé! Maintenant, le texte h3 change, mais la carte ne changera pas, dois-je recharger la page ou quelque chose? – Robin

Vous pouvez simplement déplacer la carte avec map.setCenter (LatLng). Cette méthode n'utilisera aucun autre marqueur et n'effacera pas les marqueurs existants. Vous pouvez également déplacer la carte via le panTo (LatLng) Les deux méthodes sont également disponibles une fois la carte initialisée.

Vous pouvez lire plus ici https://developers.google.com/maps/documentation/javascript/reference#Map

Source

2017-04-24 16:41:21 Osama

Modifier l'ID div et le contenu innerHTML avec javascript

Répondre

Questions connexes