通过功能通过用户输入更改全局变量 [英] Changing global variable by user input via function
问题描述
我有一个变量，我希望我的用户能够更改此变量.变量的原始值应更改，因此也可以在其他函数中使用.(用户输入一个新日期，然后该变量在url的末尾(另一个函数的调用地图)被更改，然后显示该日期的数据.)
I have a variable and I want my user to be able to change this variable. The original value of the variable should change, so it can be also be used in another function. (The user enters a new date, and this variable then gets changed at the end of the url (of the other function, that calls the map), which then shows the data from that date.)
我知道我必须将变量设置为全局变量，但是我仍然无法正常工作.这可能有点愚蠢，但我似乎无法使其正常工作.我在做什么错了?
I know I have to make my variable global, but I still doesn't work. It's probably something dumb, but I just can't seem to make it work. What am I doing wrong?
下面是一些代码:
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中时使用，但是仍然无法如我所愿.下面是所有代码.
I got the answer to why the second console.log did not display the value once it was changed. I thought that if I could make it work in my html, then it would work in when I pasted it in JavaScript, but it still does not work as I hope it would. Beneath is all the code.
当我输入新值时，控制台会显示:doStuff未定义.
When I enter a new value the console says: doStuff is not defined.
所有其他事情都应该按需进行！
All the other things work as they should!
(我与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>推荐答案
首先，我注释掉与该问题无关的部分，因为我没有该代码.
First off, I commented out the parts not relevant to the question as I did not have that code.
没有全球化是一个好习惯.为此，我创建了一个模块，其中包含您的函数以及通过该模块获取和设置私有值的方法.可能有更简单的方法(不必执行 new MyApp )，但是我用它来演示如何创建具有唯一值的应用程序实例.例如，对于第二个实例，您可能包括 var myOtherApp = new MyApp("2017-08-23"); .
NOT having a global is a good practice. In order to do that, I created a module that included your function as well as a way to get and set the private value through the module. There are likely simpler ways (not having to do new MyApp) but I used that to show how you can create an instance of the app with unique values. For example you might include var myOtherApp = new MyApp("2017-08-23"); for a second instance.
我还从标记中删除了事件处理程序，并在脚本中添加了一个.您的原始文档不起作用的原因是，您在标记之后包含了.js文件，并对其进行了调用，因此尚未对其进行定义.在此之后，它现在可以与< script ... 一起使用.
I also removed the event handler from the markup and added one in the script. The reason your original did not work was because you included your .js file AFTER the markup with a call to it so it was not yet defined. This now works with <script... after that.
在此示例中，我使您的map元素变小了，以显示输入内容更容易.
I made your map element smaller to show the inputs easier in this example.
我还展示了如何在脚本以及函数执行中设置(现在不是全局)值.
I also showed how to set the (now not global) value in the script as well as from the function execution.
我还默认将输入设置为值(可以采用几种方法)
I also set the input to the value by default (several ways that could be done)
/*
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>这篇关于通过功能通过用户输入更改全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
