我有一个变量，我希望我的用户能够改变这个变量。该变量的初始值应该改变，所以它也可以在其他功能中使用。 （用户输入一个新的日期，以及该变量然后得到在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>首先，我注释掉的问题不相关的部分，因为我没有这个代码。
没有一个全球性的是一个很好的做法。为了做到这一点，我创建了一个模块，包括你的功能，以及一种方式来获得，并通过模块设置专用值。有可能更简单的方法（不必做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> 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