在使用onchange函数的for循环中,id="main "的数组对象不显示。

问题描述 投票:0回答:1

我使用document.write,因为它能显示我希望它显示的内容。它可以工作,但它会删除我试图显示的ID中的页面的其他内容。有什么方法可以让我在id="main "内显示这个for循环?当我尝试使用document.getElementById("main").innerHTML时,它只会显示数组中的最后一个数据,也就是Normal这个城市。就是这样。谁能帮帮我?

var cities = [
  { city: "Bloomington, IL",
    latitude: "40.4842° N, 88.9937° W",
    population: "77,962",
    elevation: "797 feet (243 m) above sea level",
  },
   { city: "Normal, IL",
     latitude: "40.5142° N, 88.9906° W",
     population: "54,742",
     elevation: "869 feet (265 m) above sea level",
   }
];


function displayCityInfo() {
  var x = document.getElementById("cityInfo").value;
  if(x==1){
    document.write("<h2>Results</h2>");
    for(i=0; i<cities.length; i++){
        document.write("Welcome to the city of " + cities[i].city
        + ", latitude is " + cities[i].latitude + "<p>");
    }
  }
  else if(x==2){
      document.write("<h2>Results</h2>");
      for(i=0; i<cities.length; i++){
          document.write("Welcome to the city of " + cities[i].city
          + ", population is " + cities[i].population + "<p>");
      }
  }
  else if(x==3){
      document.write("<h2>Results</h2>");
      for(i=0; i<cities.length; i++){
          document.write("Welcome to the city of " + cities[i].city
          + ", elevation is " + cities[i].elevation + "<p>");
      }

  }
}

  <body>
    <h1>City Information</h1>
      <label>Select an option:</label>
      <select id="cityInfo" onchange="displayCityInfo()">
        <option selected disabled>Select an option</option>
        <option value="1" enabled>Latitude/Longitude</option>
        <option value="2" enabled>Population</option>
        <option value="3" enabled>Elevation</option>
      </select>
    <main id ="main">
    </main>
  </body>





javascript arrays for-loop if-statement onchange
1个回答
0
投票

.innerHTML 能正常工作。你要做的是,而不是去 .innerHTML = "content" 你会用 +=. 这将会在元素的内部HTML中添加任何你想要的内容.因此,例如。

// This will *set* the content to be an H1 with 'Hey'
document.getElementById("main").innerHTML = "<h1>hey</h1>";

// This will *add* a paragraph tag to 'main'
document.getElementById("main").innerHTML += "<p>How is it going?</p>"

因此,"主 "现在将是

<div id="main>
    <h1>hey</h1>
    <p>How is it going?</p>
</div>

0
投票

快速回答

每当你像刚才那样使用document write时,它就会覆盖整个页面,这就是document.write在onchange回调中发生的行为。这就是document.write在onchange回调中发生的行为。

要解决这个问题,你需要先创建你的字符串,然后把它追加到dom中。有多种方法可以做到这一点。

    function displayCityInfo() {
        var x = document.getElementById("cityInfo").value;
        var m = document.getElementById("main")

        if(x==1){
          var cityInfoStr = "";

          for(i=0; i<cities.length; i++){
              cityInfoStr += "Welcome to the city of " + cities[i].city
              + ", latitude is " + cities[i].latitude + "<p>";
          }
          m.innerHTML = "<h1>Result</h1>" + cityInfoStr
        }
    }

请注意以下几点。

1-你应该在一个p标签中创建文本,也许是在一个p标签中(看看使用JS创建子节点)。

2- innerHTML函数不是一个安全的函数(检查它的安全问题,以防止跨站点脚本)

解释

根据规格。

这个方法有非常特殊的行为。在某些情况下,这个方法会影响HTML解析器运行时的状态,导致DOM与文档源码不对应(例如,如果写入的字符串是""或'<'!...。在其他情况下,调用可以先清除当前页面,就像调用了document.open()一样。在更多的情况下,该方法会被简单地忽略,或者抛出一个异常。用户代理被明确允许避免执行通过该方法插入的脚本元素。 而更糟糕的是,该方法的确切行为在某些情况下可能依赖于网络延迟,这可能导致很难调试的失败。基于所有这些原因,强烈不鼓励使用这种方法。

来自 https:/html.spec.whatwg.orgmultipagedynamic-markup-insertion.html#dom-document-write


© www.soinside.com 2019 - 2024. All rights reserved.