通过函数通过用户输入更改全局变量

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>

通过函数通过用户输入更改全局变量

Changing global variable by user input via function

javascript

variables

global

function