Question

我正在制作带地图的地理测验。我有这个函数可以随机加载不同的国家名称。

<h1>Can you locate

<script type="text/javascript">

generateCountry();


function generateCountry(){

filenames = [ "Greece", "France", "Italy", "United Kingdom", "Germany" ];

filename = filenames[Math.floor(Math.random()*filenames.length)];

document.write(filename);
}


</script>
on the map?
</h1>

我正在使用谷歌地图，当我点击带有功能的正确国家时，我会收到关于我是对还是错的警报。

   function getCountry(latLng) {
              geocoder.geocode( {'latLng': latLng},
                function(results, status) {
                  if(status == google.maps.GeocoderStatus.OK) {
                    if(results[0]) {
                      for(var i = 0; i < results[0].address_components.length; i++) {
                        if(results[0].address_components[i].types[0] == "country") {
                          if(results[0].address_components[i].long_name == filename) {
                              alert("right");

                                generateCountry();

                           } else {
                              alert("wrong");

                           }
                        }
                      }
                    }


                    else {
                      alert("No results");
                    }
                  }
                  else {
                    alert("Status: " + status);
                  }
                }
              );
      }

当测验加载时我会看到第一个问题，例如：你能在地图上找到法国吗？并且地图响应很好。当我单击右边的那个时，之后的地图似乎识别出文件名变量中的新国家，就像当我点击其他国家时，我最终获得了德国的权利。所以地图似乎正确。问题是上面问题上的名称不会从法国变为德国。我需要做什么才能在第一个问题的正确警告上单击确定后加载新的国家/地区名称，而不重新加载整个页面？我知道我可能没有使用最好的方法来做到这一点，所以任何帮助和指导将不胜感激。

Answer 1

Don't use document.write.相反，在文本中放置一个空的范围并给它一个id，如下所示：

<h1>Can you locate <span id="country"></span> on the map?</h1>

然后，当您想要更改它时，使用DOM获取元素并更改文本：

document.getElementById('country').textContent = "Germany";

这样做的另一个好处是脚本不必位于h1的中间;您可以将其移至head或body的末尾，具体取决于您的喜好。

如何从javascript函数加载新的测验Q.

1 个答案: