Объект массива не отображается в id = "main" в a для l oop с использованием функции onchange - PullRequest
Новая
       63

Объект массива не отображается в id = "main" в a для l oop с использованием функции onchange

0 голосов
/ 07 мая 2020

Я использую document.write, потому что он отображает то, что я хотел. Это работает, но удалит другое содержимое страницы в идентификаторе, на котором я пытаюсь отобразить его. Есть ли способ отобразить это для l oop внутри id = "main"? Когда я пытаюсь использовать document.getElementById ("main"). Inner HTML, он будет отображать только последние данные в массиве, который является городом 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>

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Быстрый ответ

Всякий раз, когда вы используете запись документа, как вы только что сделали, она перезапишет всю страницу. Это поведение происходит, когда document.write находится в обратном вызове onchange.

Чтобы исправить это, вам нужно сначала создать свою строку, а затем добавить ее в дом. Есть несколько способов сделать это. 

    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 - вы должны создать текст, возможно, в теге ap (посмотрите на создание дочерних узлов с помощью JS)

2- внутренняя HTML функция не является безопасной (проверьте с ней проблемы безопасности для межсайтового скриптинга)

объяснение

в соответствии со спецификациями:

Этот метод имеет очень своеобразное c поведение. В некоторых случаях этот метод может повлиять на состояние анализатора HTML во время его работы, в результате чего DOM не соответствует источнику документа (например, если записанная строка является строкой "" или '< '! ... В других случаях вызов может сначала очистить текущую страницу, как если бы был вызван document.open (). В еще большем количестве случаев метод просто игнорируется или вызывает исключение. Агенты пользователей явно разрешены чтобы избежать выполнения элементов сценария, вставленных с помощью этого метода. И что еще хуже, точное поведение этого метода в некоторых случаях может зависеть от задержки в сети, что может привести к сбоям, которые очень трудно отладить. По всем этим причинам, настоятельно не рекомендуется использовать этот метод.

От: https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom -документ-запись

0 голосов
/ 07 мая 2020

.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>"

Итак, «main» теперь будет 

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