Question

我有一个变量，我希望我的用户能够更改此变量。变量的原始值应更改，因此也可以在其他函数中使用。（用户输入一个新日期，然后该变量在url的末尾（另一个函数的调用地图）被更改，然后显示该日期的数据。）

我知道我必须将变量设置为全局变量，但是我仍然无法正常工作。这可能有点愚蠢，但我似乎无法使其正常工作。我在做什么错了？

以下是一些代码：

var date = 1;

function doStuff() {
  var nameElement = document.getElementById("someInput");
  date = nameElement.value;
  console.log(date); //shows after I enter a new value the new value
};

console.log(date); //shows the original value, 1

<input id="someInput" type="text">
<input type="button" value="GoToDate" onClick="doStuff()">

编辑：

我得到了为什么第二个console.log更改后不显示该值的答案。我以为如果可以在html中使用它，则可以在将其粘贴到JavaScript中时使用，但是仍然无法如我所愿。下面是所有代码。

当我输入新值时，控制台会显示：doStuff未定义。

所有其他事情都应该按需进行！

（我与NPM合作）

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import TileWMS from 'ol/source/TileWMS.js';

	var inputvp = "2018-10-19 08:00:00";
			
	function doStuff() {
		var nameElement = document.getElementById("someInput");	
		inputvp = nameElement.value;
		console.log(inputvp);
	};
			
   
	  

    var view = new View({
        center: [0, 0],
        zoom: 1
      });

    var map = new Map({
        layers: [wmsLayer],
        target: 'map',
        view: view
      });

<!DOCTYPE html>
<html>
    <head>
		<title>Tiled WMS</title>
		<style>
		  #map {
			width: 500px;
			height: 500px;
		  }
		</style>
	</head> 

  <body>
    <div id="map"></div>
	<input id="someInput" type="text">
	<input type="button" value="GoToDate" onClick="doStuff()">
	<script src="./index.js"></script>
  </body>
</html>

Answer 1

        var date=1;

        function doStuff() {
            var nameElement = document.getElementById("someInput"); 
            date = nameElement.value;
            console.log(date); //shows after I enter a new value the new value//it is ok because the it show the value after the function was called
        };

      //  console.log(date); //shows the original value, 1// the function hasn't been called yet

Answer 2

首先，我注释掉与该问题无关的部分，因为我没有该代码。

没有全球化是一个好习惯。为了做到这一点，我创建了一个模块，其中包含您的函数以及通过该模块获取和设置私有值的方法。可能有更简单的方法（不必执行new MyApp），但是我用它来说明如何创建具有唯一值的应用程序实例。例如，您可能在第二个实例中包含var myOtherApp = new MyApp("2017-08-23");。

我还从标记中删除了事件处理程序，并在脚本中添加了一个。原始文件不起作用的原因是，在标记调用之后包含了.js文件，因此尚未对其进行定义。之后，它现在可以与<script...一起使用。

在此示例中，我使您的地图元素更小以显示输入。

我还展示了如何在脚本以及函数执行中设置（现在不是全局）值。

我还默认将输入设置为值（可以采用几种方法）

/*
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import TileWMS from 'ol/source/TileWMS.js';
*/
var MyApp = function(setDate) {
  /*  Private variables and functions that only
      other private or public functions may access
      and cannot be accessed outside this Module
  */
  // set a date as sent or use the default
  var iAmPrivate = setDate || "2018-10-19 08:00:00";

  /* Properties and methods contained by 
     this object being returned will be public
     and  be accessible in the global scope.
  */
  return {
    set inputvp(value) {
      iAmPrivate = value;
    },
    get inputvp() {
      return iAmPrivate;
    },
    /* probably want parsing of the date etc. in here */
    doStuff: function() {
      var nameElement = document.getElementById("someInput");
      inputvp = nameElement.value;
      console.log(inputvp);
    }
  }
};

// Create a app with data for date text
var myApp = new MyApp("2018-12-13 11:30:00");
console.log(myApp.inputvp);
myApp.inputvp = "2018-7-13 14:22:00"
console.log(myApp.inputvp);
let gotodate = document.getElementById('go-to-date');
let inputDate = document.getElementById('someInput');
// put value in the input (could be done in an app function also)
inputDate.value = myApp.inputvp;
gotodate.onclick = myApp.doStuff;

/*
    var wmsSource = new TileWMS({
      url: 'http://localhost:8080/geoserver/Observations/wms',
      params: {
        'LAYERS': 'Observations:Obs',
        'TILED': true,
        viewparams: 'chosen_timestamp:' + myApp.inputvp
      },
      serverType: 'geoserver',
      crossOrigin: 'anonymous'
    });

    var wmsLayer = new TileLayer({
      source: wmsSource
    });


    var view = new View({
      center: [0, 0],
      zoom: 1
    });

    var map = new Map({
      layers: [wmsLayer],
      target: 'map',
      view: view
    });
    */

#map {
  border: solid lime 1px;
}

<head>
  <title>Tiled WMS</title>
  <style>
    #map {
      width: 50px;
      height: 50px;
    }
  </style>
</head>

<body>

  <div id="map"></div>
  <input id="someInput" type="text" />
  <button type="button" id="go-to-date">GoToDate</button>
  <script src="./index.js"></script>
</body>

通过功能

2 个答案: