0

このコードは、2 つのボタンMap&を表示する必要がありますRainfall。
その上にテキストがあります"Choose a display"。
いずれかのボタンをクリックすると、Google マップの画像 (マップ ボタンがクリックされた場合) または降雨画像 (降雨ボタンがクリックされた場合) が表示されます。

私が抱えている問題は、最初に地図ボタンをクリックすると、テキストが地図に置き換えられます。これは素晴らしいことですが、降雨量ボタンをクリックすると、画像が地図に置き換わらず、その下に表示されるだけです。 .

"Choose a display"また、テキストが表示された地図ボタンの前に降雨ボタンをクリックすると、そのボタンをクリックした後に非表示にしたいときに、テキストの下に画像が表示されます。

どんな助けでも大歓迎です。

HTML:

<p align="center"style="font-family:verdana;"id="googlemap">Choose a Main Display</p>
<p align="center"id="bommap"></p>

<p align="center">
    <button type="button" onclick="mapFunction()">Map</button>
    <button type="button" onclick="rainFunction()">Rainfall</button>
</p>

JavaScript:

function mapFunction() {
    x = document.getElementById("googlemap"); // Find the element
    x.innerHTML = '<iframe width="640" height="480" frameborder="0"scrolling="no" marginheight="0" marginwidth="0" src="https://www.google.com.au/maps?f=d&amp;source=s_d&amp;saddr=23+Burgundy+St,+Carseldine+QLD&amp;daddr=90+Gilbert+Rd,+Grange+QLD+to:Narrowneck+Court+Surfers+Paradise,+204+Ferny+Ave,+Surfers+Paradise+QLD&amp;hl=en&amp;geocode=FfOeXv4d6qweCSn9XcBQSP2TazGVQ_0hH3aSYA%3BFRKQXf4d5_QeCSlRy4j_0lmRazEdtrkd8CRD0Q%3BFWXtVP4dWCUlCSGK90q-pKXOZCmv-18SewWRazGK90q-pKXOZA&amp;aq=0&amp;oq=Narr&amp;sll=-27.422699,153.02411&amp;sspn=0.004819,0.008272&amp;t=h&amp;mra=ls&amp;ie=UTF8&amp;ll=-27.555764,153.208466&amp;spn=0.584401,0.878906&amp;z=10&amp;output=embed"></iframe>' // Change the content
}

function rainFunction() {
    x = document.getElementById("bommap"); // Find the Element
    x.innerHTML = '<img src="http://www.bom.gov.au/radar/IDR663.gif?20130517070843" border="0" alt="128 km Brisbane (Mt Stapylton) Radar" title="128 km Brisbane (Mt Stapylton) Radar">'
}
4

2 に答える 2

0

<p>表示/非表示にするテキストを含む新しいタグを作成します。<p>地図を表示したい場合は、 other をクリアする必要があります。

  <p id='titleMap'>    Choose a Main Display</p>
    <p align="center"style="font-family:verdana;"id="googlemap">
    </p>
    <p align="center"id="bommap"></p>

    <script>

    function mapFunction()
    {
    document.getElementById("bommap").innerHTML = "";
    document.getElementById("titleMap").innerHTMl = "";
    x=document.getElementById("googlemap");  // Find the element
    x.innerHTML='<iframe ...></iframe>'    // Change the content
    }

    function rainFunction()
    {
    document.getElementById("googlemap").innerHTML = "";
    document.getElementById("titleMap").innerHTMl = "";
    x=document.getElementById("bommap");    // Find the Element
    x.innerHTML='<img src="http://www.bom.gov.au/radar/IDR663.gif?20130517070843" border="0"     alt="128 km Brisbane (Mt Stapylton) Radar" title="128 km Brisbane (Mt Stapylton) Radar">'
    }
    </script>
于 2013-05-17T07:45:56.653 に答える
0

レインマップと Google マップには別pのマップがあるため、関数を実行してコンテンツを表示すると、innerHTML両方のマップが表示されます。あなたの例が機能するには、次のことを行う必要があります

function rainFunction()
{
  var x=document.getElementById("bommap");    // Find the Element
  var x.innerHTML='<img src="http://www.bom.etc.etc.' //Change the content
  document.getElementById("googlemap").innerHTML = ''; //Empty the googlemap content;
}

P関数を実行すると、他の要素の内容が空になります (削除されます) 。これを機能させるには、このロジックを他の関数にも適用する必要があります。varまた、キーワードを使用してローカル変数を宣言する必要があります。

これを次のような 1 つの関数に組み合わせることができます。

function changeImages(ele){

   var x = document.getElementById("bommap");
   var y = document.getElementById("googlemap");
   var z = document.getElementById("weather"); // ID of the new weather p element

   if(ele === y.id){ //if the value we passed into the function is the same as the p id  
      x.innerHTML = ''; //Empty rainforest image
      z.innerHTML = ''; //Empty the weather image
      y.innerHTML = '<iframe width="640" height="480" etc' //Set googlemap content
   } else if(ele === x.id) {
      y.innerHTML = '';  //Empty googleMap
      z.innerHTML = ''   //Empty weather
      x.innerHTML = '<img src="http://www.bom.gov.au/radar/ etc' //Set bommap content
   } else {
      y.innerHTML = '' //Empty googleMap
      x.innerHTML = '' //Empty bommap
      z.innerHTML = 'contenct for weather here' //Set weather content
   }
}

次に、いずれかのボタンからこの関数を呼び出します

<button type="button" onclick="changeImages('googlemap')">Map</button>
<button type="button" onclick="changeImages('bommap')">Rainfall</button>
<button type="button" onclick="changeImages('weather')">Weather</button>

コンテンツを動的に設定するよりも、画像/要素を表示/非表示にする方がはるかに効率的です。表示/非表示はjavascriptでググってください。基本的な考え方は、すべての画像/ iframe をセットアップし、その要素を css でstyle="display:none;"非表示にして、ボタンをクリックしたときに関連する画像を表示または非表示にすることです。

于 2013-05-17T07:47:27.367 に答える