Как получить доступ к глобальной переменной в другой функции
У меня есть глобальная переменная «ввод», и ее значение присваивается в функции
processinput. Но если я попытаюсь получить доступ к значению input внутри другой функции, значение будет отображаться как неопределенное.
Код:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Visualization</title>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<div class = "graph-container">
<div id = "network" class = "main-panel"></div>
<div id = "graph" class = "side-panel">
<div class = "arrow"></div>
</div>
</div>
<label for = "quantity">Enter the value</label>
<input type = "text" id = "quantity">
<button id = "submit" onclick = "processInput()">Submit</button>
<script>
var input;
function processInput() {
input = document.getElementById("quantity").value;
console.info(input);
}
document.addEventListener("DOMContentLoaded", function() {
// Rest of your code...
console.info(input);
// Fetch JSON data, initialize graph, and set up event listeners
});
</script>
</body>
</html>
Предложения о том, как получить доступ к значению input вне функции processInput, будут очень полезными.
Обновлено:
Спасибо за комментарии. Например, если я попытаюсь отобразить значение input вне функции processInput, оно будет неопределенным.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Visualization</title>
<link rel = "stylesheet" href = "style.css">
<script src = "https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<div class = "graph-container">
<div id = "network" class = "main-panel"></div>
<div id = "graph" class = "side-panel">
<div class = "arrow"></div>
</div>
</div>
<label for = "quantity">Enter the value</label>
<input type = "text" id = "quantity">
<button id = "submit" onclick = "processInput()">Submit</button>
<script>
var input;
function processInput() {
input = document.getElementById("quantity").value;
console.info(input);
}
function test() {
// Rest of your code...
console.info(input);
// Fetch JSON data, initialize graph, and set up event listeners
};
console.info(input);
</script>
</body>
</html>
В предоставленном вами коде кажется, что вы пытаетесь записать значение ввода сразу после того, как документ готов (DOMContentLoaded). Однако значение input устанавливается только при вызове функции processInput(), то есть при нажатии кнопки «Отправить».
@AKX Не могли бы вы проверить правку?
@ErhanÇapar Не могли бы вы увидеть правку? Я хотел бы знать, как получить доступ к значению глобальной переменной вне функции processInput.
Вы никогда не вызываете функцию test
@Наташа Достаточно просто ввести имя переменной, чтобы получить доступ к переменной вне функции processInput, поскольку переменная определена вне функции.
@Konrad Я сомневаюсь, что если значение input установлено внутри функции processInput, могу ли я получить к нему доступ в другом месте. Например, я пытался сделать console.info(input); вне функции (см. строку ниже тестовой функции).
@ Наташа Опять же, к тому времени, когда сработает последний console.info(input), ни у кого не будет времени вызвать processInput, чтобы присвоить значение.
Путешествия во времени не существует
@AKX спасибо за разъяснения. Не могли бы вы подсказать, как изменить код, чтобы он заработал? Прошу прощения за наивный вопрос.
Почему вы хотите получить глобальный доступ к значению этого ввода?
@Конрад Спасибо. Я хочу получить глобальный доступ к значению input, потому что я присваиваю значение другой переменной на основе этого значения `var nscale = [input * 0.1, input, input * 10];`, но вне функции processInput.
@ Наташа Хорошо, тогда ... просто сделай это внутри функции? Что бы вы сделали с этим nscale тогда?
Массив @AKX nscale используется для определения steps для определения ползунков графа сети plotly.js plotly.com/javascript/sliders . Если я включу остальную часть скрипта в функцию processInput, то график графика не будет виден во внешнем интерфейсе.
@Natasha Это станет видно, как только вы введете значение. Но вам придется взглянуть на API в Plotly, чтобы изменить steps для создания графика...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша глобальная входная переменная не имеет значения при загрузке страницы. И он никогда не будет иметь значения сразу после того, как вы что-то ему присвоите. Что вы и делаете, но в своей функции processInput(), которая вызывается только при нажатии кнопки отправки.
Javascript запускается, как только вы загружаете страницу, и он напечатает неопределенную глобальную входную переменную еще до того, как вы вызовете функцию processInput().
Я предлагаю вам присвоить значение, как только javascript запустится следующим образом:
<script>
// This way your input will contain a reference to the element which has an id of "quantity"
var inputElem = document.getElementById("quantity");
// Prints nothing because the input element has no assigned default value
console.info( inputElem.value );
</script>
В вашей функции ввода процесса вы можете присвоить значение другой переменной, если хотите, примерно так:
<script>
var inputElem = document.getElementById("quantity");
var inputText;
/*
This function will be called on submit button click and it will add
the value of the inputElem to the inputText variable. Later you can
use inputText anywhere.
*/
function processInput(){
inputText = inputElem.value;
}
// The below code still prints nothing because the processInput() function does not run at this point in time.
console.info(inputText);
</script>
К моменту пожара
DOMContentLoadedни у кого не будет времени ввести что-либо в поле. В противном случае ваш код будет работать нормально.