0

This code should display 2 buttons Map & Rainfall.
Above that should be the text "Choose a display".
Once either button is clicked, it then displays either a google map image (If map button clicked) or a Rainfall image (If rainfall button clicked).

The issue I'm having is if I click the map button first, the text is swapped for the map, which is great, but then if I click the rainfall button, the image doesn't replace the map, it just displays under it.

Also if I click the rainfall button BEFORE the map button with the text displayed, then the image is displayed UNDER the text "Choose a display" when I want it to be hidden after I click that button too.

Any help will be greatly appreciated.

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>当您想要显示地图时， 您需要清除其他。

  <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

您有一个单独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关键字声明局部变量。

您可以将其组合成一个类似这样的功能。

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 回答