通过功能通过用户输入更改全局变量
[英]Changing global variable by user input via function
问题描述
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.) （用户输入一个新日期，然后该变量在url的末尾（另一个函数的调用地图）被更改，然后显示该日期的数据。）
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? 我究竟做错了什么？
Here is some of the code: 这是一些代码：
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()">
EDIT: 编辑：
I got the answer to why the second console.log did not display the value once it was changed. 我得到了为什么第二个console.log更改后不显示该值的答案。 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. 我以为如果可以在html中使用它，则可以在将其粘贴到JavaScript中时使用，但是仍然无法如我所愿。 Beneath is all the code. 下面是所有代码。
When I enter a new value the console says: doStuff is not defined. 当我输入新值时，控制台会显示：doStuff未定义。
All the other things work as they should! 所有其他事情都应该按预期进行！
(I work with NPM) （我与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>
2 个解决方案
解决方案1
0 2018-12-13 11:36:13
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
解决方案2
0 已采纳 2018-12-13 13:18:29
First off, I commented out the parts not relevant to the question as I did not have that code. 首先，我注释掉与该问题无关的部分，因为我没有该代码。
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. 可能有更简单的方法（不必执行new MyApp ），但是我用它来说明如何创建具有唯一值的应用程序实例。 For example you might include var myOtherApp = new MyApp("2017-08-23"); 例如，您可以包括var myOtherApp = new MyApp("2017-08-23"); for a second instance. 对于第二个实例。
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. 原始文件不起作用的原因是，在标记调用之后包含了.js文件，因此尚未对其进行定义。 This now works with <script... after that. 现在，此功能可用于<script...
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.