Изменение глобальной переменной с помощью пользовательского ввода через функцию - PullRequest
Новая
       16

Изменение глобальной переменной с помощью пользовательского ввода через функцию

0 голосов
/ 13 декабря 2018

У меня есть переменная, и я хочу, чтобы мой пользователь мог изменить эту переменную.Исходное значение переменной должно измениться, поэтому его также можно использовать в другой функции.(Пользователь вводит новую дату, и эта переменная затем изменяется в конце 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 не определен.

Все остальные вещи работают так, как должны!

(Iработа с НПМ) 

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 ]

0 голосов
/ 13 декабря 2018

Прежде всего, я закомментировал части, не относящиеся к вопросу, так как у меня не было этого кода.

НЕ иметь глобальных - хорошая практика.Для этого я создал модуль, включающий вашу функцию, а также способ получить и установить частное значение через модуль.Вероятно, есть более простые способы (без необходимости 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>
0 голосов
/ 13 декабря 2018 

        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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...