每次单击后，Javascript函数未返回document.getElementById值

Question

I have a script that populates several .innerHTML IDs through several clicks on a map. 我有一个脚本，可通过在地图上单击几次来填充几个.innerHTML ID。 Currently, the .innerHTML show on the application as it should. 当前， .innerHTML应该在应用程序上显示。 My next step is to copy those same .innerHTML to a string. 我的下一步是将那些相同的.innerHTML复制到字符串中。 The string file will allow me to send the text information to the print job. 字符串文件将使我可以将文本信息发送到打印作业。 I'm trying to create a function that would allow me to pass the .innerHTML to a string after every click on a map. 我正在尝试创建一个函数，该函数将允许我在每次单击地图后将.innerHTML传递给字符串。 However, the return on the function returns a blank or empty field. 但是，函数的返回值将返回空白或空字段。 But when I do a console.log, it shows correctly. 但是，当我执行console.log时，它可以正确显示。 My question is how do I pass the inner.html to a string through a function? 我的问题是如何通过函数将inner.html传递给字符串？ Any help is appreciated... 任何帮助表示赞赏...

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

Answer 1

This line: 这行：

map.on("click", getValues);

will call getValues when the map is clicked, but the return value from that goes nowhere. 单击地图时将调用getValues ，但是返回值无处可寻。

I think if you want a var outside of the function scope to be updated on clicking, you'd need to do 我认为，如果您希望点击时更新功能范围之外的var，则需要

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

That way x would be updated. 这样x将被更新。 However you'd then need something else to notice that x was changed, and do something with that. 但是，您还需要其他一些注意x的更改，然后对其进行处理。

EDIT 编辑

As @Barmar points out in the comment, you need to do something with the changed variable. 作为@Barmar在评论中指出，你需要做的改变变量的东西。

Currently your code runs like this: 当前，您的代码运行如下：

create a closure on the x variable. 在x变量上创建一个闭包。
set up click handler to update x 设置点击处理程序以更新x
take a copy of x 's value, which is uninitialised, as show 取x的一个值的副本，该副本未初始化，如下show
set the innerHTML of countResult_x to the value of show (ie. empty!) 的innerHTML设置countResult_x到的值show （即空！）

Then when you click, all that happens is that x changes. 然后，当您单击时，所有发生的就是x发生变化。 The rest of the code (steps 3 and 4) do not run because you have not told them to run. 其余代码（第3步和第4步）不会运行，因为您没有告诉他们运行。

It's unclear if/why you want a variable x scoped where you have it. 目前尚不清楚是否/为什么要让变量x限定作用域。 It looks like you could just do it like: 看来您可以这样做：

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

Or you could do something like 或者你可以做类似的事情

var x = '';
function getValues() {
   x += "<br/><br/>x is now: " + document.getElementById("countResult_H2").innerHTML;
   document.getElementById('countResult_x').innerHTML = x;
}

Answer 2

just use 只是使用
return String(x); 返回String（x）; for making value to string 为字符串创造价值

每次单击后，Javascript函数未返回document.getElementById值

问题描述

2 个解决方案

解决方案1
0 2018-05-04 23:11:50

EDIT 编辑

解决方案2
-1 2018-05-04 20:26:00

每次单击后，Javascript函数未返回document.getElementById值

问题描述

2 个解决方案

解决方案1 0 2018-05-04 23:11:50

EDIT 编辑

解决方案2 -1 2018-05-04 20:26:00

解决方案1
0 2018-05-04 23:11:50

解决方案2
-1 2018-05-04 20:26:00