Функция Javascript не возвращает значение document.getElementById после каждого клика - PullRequest
Новая
       14

Функция Javascript не возвращает значение document.getElementById после каждого клика

0 голосов
/ 04 мая 2018

У меня есть скрипт, который заполняет несколько .innerHTML идентификаторов несколькими кликами на карте. В настоящее время .innerHTML отображается в приложении, как и должно быть. Мой следующий шаг - скопировать те же самые .innerHTML в строку. Строковый файл позволит мне отправить текстовую информацию в задание на печать. Я пытаюсь создать функцию, которая позволила бы мне передавать .innerHTML в строку после каждого нажатия на карту. Однако возвращение функции возвращает пустое или пустое поле. Но когда я делаю console.log, он показывает правильно. У меня вопрос, как я могу передать inner.html в строку через функцию? Любая помощь приветствуется ... 

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Test</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/tundra/tundra.css">


    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      #mapDiv {
        padding: 1px;
        border: solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }

      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }

      #map {
        margin: 0;
        padding: 0;
      }

      #feedback {
        background: #fff;
        border: 2px solid #666;
        border-radius: 5px;
        bottom: 20px;
        color: #666;
        font-family: arial;
        height: auto;
        left: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 300px;
        z-index: 40;
      }

      #feedback a {
        border-bottom: 1px solid #888;
        color: #666;
        text-decoration: none;
      }

      #feedback a:hover,
      #feedback a:active,
      #feedback a:visited {
        border: none;
        color: #666;
        text-decoration: none;
      }

      #note {
        padding: 0 0 10px 0;
      }

      #info {
        padding: 10px 0 0 0;
      }

    </style>
    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/Color", "esri/config",
        "dojo/_base/array", "dijit/registry",
        "esri/geometry/geometryEngine", "dojo/store/Memory", "dojo/dom-construct",
        "dijit/form/Button", "dojo/dom", "dojo/on",
        "dojo/parser", "dojo/domReady!"
      ], function(
        Map,
        Color, esriConfig,
        array, registry,
        geometryEngine, Memory, domConstruct,
        Button, dom, on,
        parser
      ) {
        parser.parse();

        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-84.20, 33.78], // lon, lat
          zoom: 11
        });

        document.getElementById('countResult_H2').innerHTML = "Textx";

        map.on("click", getValues);

        var x;

        function getValues() {
          x = document.getElementById("countResult_H2").innerHTML;
        }

        var show = x;
        
        document.getElementById('countResult_x').innerHTML = show;


      });

    </script>
  </head>

  <body class="tundra">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;">
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
      <div id="feedback">
          <div id="info">
            <div id="note">
              <br><strong>Info: </strong><span class="stats" id="countResult_H2"></span><br><br>
              <br><strong>Info2 </strong><span class="stats" id="countResult_x"></span><br><br>
            </div>
          </div>
      </div>
      </div>
    </div>


  </body>

</html>

Ответы [ 2 ]

0 голосов
/ 05 мая 2018

Эта строка: 

map.on("click", getValues);

будет вызывать getValues при нажатии на карту, но возвращаемое значение от этого никуда не денется.

Я думаю, что если вы хотите, чтобы переменная вне области действия обновлялась при нажатии, вам нужно будет сделать 

var x;
function getValues() {
  x = document.getElementById("countResult_H2").innerHTML;
}

Таким образом x будет обновлено. Однако тогда вам нужно что-то еще, чтобы заметить, что х был изменен, и что-то с этим сделать.

EDIT

Как указывает @Barmar в комментарии, вам нужно что-то сделать с измененной переменной.

В настоящее время ваш код работает так:

  1. создать замыкание по переменной x.
  2. установить обработчик клика для обновления x
  3. возьмите копию значения x, которое не инициализировано, как show
  4. установить для innerHTML countResult_x значение show (т. Е. Пусто!)

Затем, когда вы нажимаете, все, что происходит, это то, что х меняется. Остальная часть кода (шаги 3 и 4) не запускаются, потому что вы не сказали им запускаться.

Неясно, если / почему вы хотите переменную x, где она у вас есть. Похоже, вы могли бы просто сделать это как: 

    function getValues() {
      document.getElementById('countResult_x').innerHTML =
        document.getElementById("countResult_H2").innerHTML;
    }

Или вы могли бы сделать что-то вроде 

var x = '';
function getValues() {
   x += "<br/><br/>x is now: " + document.getElementById("countResult_H2").innerHTML;
   document.getElementById('countResult_x').innerHTML = x;
}
0 голосов
/ 04 мая 2018

просто используйте
return String (x); для создания значения в строку

...