Изменить идентификатор div и содержимое innerHTML с помощью javascript

Привет, я пытаюсь изменить карту Google и текст h3 с помощью javascript, но это не работает.

Что я хочу сделать, так это отобразить разные карты и заголовки, поэтому в основном я хочу заменить идентификатор <div id="map"></div> на id="map2", чтобы отобразить местоположение в Берлине вместо Лос-Анджелеса. Также я хочу заменить текст <h3 div="textChange">Worlds Finals Season 3 and 6</h3> на "Worlds Season 5".

Вот 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>

Вот 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";
    }
}

РЕДАКТИРОВАТЬ: добавлены «onlick», «div» и круглые скобки, так что теперь текст h3 меняется, но карта все еще не изменится, мне нужно перезагрузить страницу, чтобы это сработало? Использование API карт Google.


javascript html innerhtml
person Robin    schedule 24.04.2017    source источник
comment
Разве это не должно быть onclick="changediv()"? Я никогда не слышал о событии lick   -  person Alon Eitan    schedule 24.04.2017

Ответы (2)


arrow_upward
2
arrow_downward

1) здесь опечатка:

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

изменить его на:

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

2) Как упоминалось в комментарии, в html есть еще одна опечатка.

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

когда вы вызываете щелчок, вы хотите, чтобы функция вызывалась, вы забыли скобки.

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

3) и последнее, но не менее важное: карта. . Экземпляры карты в соответствии с документом должны использоваться повторно, вместо создания нового экземпляра вы должны просто изменить местоположение.

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)
  }

}
person Karim    schedule 24.04.2017
comment
О, даже в атрибуте id они умудрились ошибиться. Я заметил, что они пытаются связать функцию с событием onlick (так что вы можете добавить ее в свой ответ) - person Alon Eitan; 24.04.2017
comment
Честно говоря, я не заметил опечаток даже после 30 минут просмотра, это очень помогло! Теперь текст h3 меняется, но карта по-прежнему не меняется, мне нужно перезагрузить страницу или что-то в этом роде? - person Robin; 24.04.2017
comment
я исправил свой ответ для части карты :) - person Karim; 24.04.2017

arrow_upward
0
arrow_downward

Вы можете просто переместить карту с помощью map.setCenter(LatLng). Этот метод не будет использовать никакие другие маркеры и не удалит существующие маркеры. Вы также можете перемещать карту с помощью panTo(LatLng). Оба метода также доступны после инициализации карты.

Вы можете прочитать больше здесь https://developers.google.com/maps/documentation/javascript/reference#Map

person Osama    schedule 24.04.2017