Javascript: comment trouver le contenu de h3-tête avec l'id “map”?

J'ai une page web avec une Google Map qui fonctionne bien. Au lieu d'avoir le nom de la ville codé en dur "Bochum" là, j'ai envie de trouver l'en-tête 

<h3 id="city"><i>Bochum</i></h3>

et utiliser cette valeur dans ma fonction init ().

Je suis probablement manquant quelque chose de mineur dans le code ci-dessous. S'il vous plaît aidez-moi et merci de me référer à la référence de l'API pour un "enfant", mon Javascript compétences sont très rouillés.

Aussi je me demande, comment ai-je pu passer un plus de valeur que mon h3-tête, comme la couleur de mon marqueur?

Merci!
Alex

Javascript: comment trouver le contenu de h3-tête avec l'id “map”?

<html>
<head>
<style type="text/css">
h1,h2,h3,p { text-align: center; }
#map { width: 400; height: 200; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function init() {
for (var child in document.body.childNodes) {
child = document.body.childNodes[child];
if (child.nodeName == "H3")
alert(child);
}
//use the #city value here instead
city = 'Bochum';
if (city.length > 1)
findCity(city);
}
function createMap(center) {
var opts = {
zoom: 9,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
return new google.maps.Map(document.getElementById("map"), opts);
}
function findCity(city) {
var gc = new google.maps.Geocoder();
gc.geocode( { "address": city}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var pos = results[0].geometry.location;
var map = createMap(pos);
var marker = new google.maps.Marker({
map: map, 
title: city,
position: pos,
});
}
});
}
</script>
<head>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
<div id="map"></div>
</body>
</html>
  • Pour commencer, vous devez vraiment être à l'aide de jQuery: jquery.com
  • Pourquoi le chargement d'un 80 ko-bibliothèque pour faire une chose qui peut être fait avec une ligne?
  • c'est seulement 26kb une fois compressé. C'est un compromis entre le code de l'application plus simple et plus fiable vs faire le total de pages de plus petite taille. Par exemple, si nous utilisons $('#ville").texte(), alors il est plus court et ne cassera pas si le <i> tag est supprimé.
  • Merci, mais je n'ai pas à apprendre jQuery encore...
InformationsquelleAutor Alexander Farber | 2010-12-04
  1. 6

    Pour inclure plus de données, vous pouvez utiliser les attributs:

    <h3 id="city" data-citycolor="red"><i>Bochum</i></h3>

    Et de les faire sortir comme ceci:

    var city = document.getElementById("city");
var name = city.textContent || city.innerText;
var color = city.getAttribute("data-citycolor");

    Je pense que vous feriez mieux de l'aide de jQuery, même si c'est un 26kb fichier de la bibliothèque, depuis lors, vous pouvez simplifier cette:

    var city = $("#city");
var name = city.text();
var color = city.data("citycolor");

    Note que vous avez utilisé "#ville" en commentaire, et avec jQuery, vous pouvez utiliser exactement la chaîne dans votre code. C'est une belle victoire. Elle rend aussi trivial d'utiliser $(".ville") dans l'avenir, si vous voulez avoir plus de ces sur une page.

    • Merci, mais maintenant, je suis confus: dois-je utiliser un nœud.innerHTML, nœud.innerText ou un nœud.textContent et pourquoi?
    • innerHTML comprendra le <i> balises, dont vous ne souhaitez pas. innerText et textContent permettra à la fois d'obtenir juste le texte (pas de balises html), toutefois, les navigateurs ne supportent pas les innerText, j'ai donc inclus textContent comme une alternative pour obtenir les données. Si vous utilisez jQuery solution, vous pouvez ignorer en grande partie de la croix-navigateur les questions de ce genre, car il a la même (simple) de l'api dans tous les navigateurs.
    InformationsquelleAutor Douglas
  2. 1

    L'attribut id doit être unique dans la page - en d'autres termes, vous ne devriez avoir aucun autre élément avec id="ville". En supposant que c'est le cas, voici un exemple de ce que vous pourriez faire:

    <html>
<script type="text/javascript">
function init()
{
var node = document.getElementById("city");
var cityName = node.childNodes[0].innerHTML;
alert("Found city name: " + cityName);
}
</script>
<body onload="init();">
<h3 id="city"><i>Bochum</i></h3>
</body>
</html>

    Comme une suggestion, je perdrais du <i> et </i> balises, et au lieu d'ajouter une règle de style pour votre h3 nœud. Dans ce cas, le cityName serait juste nœud.innerHTML.

    InformationsquelleAutor Alastair
  3. 1

    Bien, le h3 a un ID, non?

    var city = document.getElementById('city').innerText;

    Ou, à l'aide de jQuery:

    var city = $('#city').text();
    • J'aurais voté si vous n'avez pas utilisé un regex sur le code html. Utilisation innerText/textContent à la place.
    • J'ai eu du mal avec innerText avant, mais peut-être que j'ai besoin de l'essayer à nouveau...
    InformationsquelleAutor Félix Saparelli
  4. 0

    En supposant que l'ID 'ville', est unique(ce qu'un ID doit être):

    document.getElementById('city').getElementsByTagName('i')[0].firstChild.data
    InformationsquelleAutor Dr.Molle