Как передать значение, изменённое onclick, из одной функции в другую?

Question

[js-newbie]

Учу JS по учебнику и сразу пишу свой код. Застрял, что-то недопонимаю. Не получается передать значение value (после его изменения в button2.onclick) из Increment() в Preview(). Так понимаю, что с замыканиями всё в порядке (если из Increment() убрать button, а оставить только инкремент, то всё работает как надо), значит затык в onclick. Подскажите, куда именно копать?

let value;

function Initial(value0) {
    value0 = 100500;
    return value0;
}

function Preview(value1) {
    value1 = Increment(value1);
    let button1 = document.createElement('button');
    button1.innerHTML = 'Value';
    button1.onclick = function() {
        alert(value1);
    }
    document.documentElement.append(button1);
}

function Increment(value2) {
    let button2 = document.createElement('button');
    button2.innerHTML = '+1';
    button2.onclick = function() {
        value2++;
        alert(value2);
    }
    document.documentElement.append(button2);
    return value2;
}

value = Initial(value);
Preview(value);

Answer 1

[dollar]

Считайте, что то, что внутри onclick - это отдельный поток (хотя это не так, но так удобней). То есть это отдельная точка входа в скрипт. Таким образом, всё, что внутри onclick случится только в будущем и вы не можете брать оттуда значения здесь и сейчас. Вы можете использовать значения, полученные в будущем только в еще более далеком будущем.

Таким образом, нужно менять логику построения вашего скрипта, его архитектуру. А именно, перестать хотеть невозможного, то есть хотеть использовать значения, которых пока еще нет.

Код внутри onclick в момент клика становится главным, и использует остальные функции по своему усмотрению. Поиспользовал, и всё. Возможно, какой-то результат сохранил куда-то в глобальную переменную для друзей. То есть это как бы не вспомогательная функция, а главная.

Как именно и что поменять, сложно сказать, потому что код абстрактный, и не ясно, что он делает. Был бы практический смысл, можно было бы переписать в соответствии с конкретной целью.

Comments

[js-newbie]

Всё. Решил проблему. Благодаря словосочетанию "глобальная переменная" в Вашем ответе. Превратил переменную value в глобальную, заменив все value на window.value. Спасибо за наводку )

spoiler

//let value;

function Initial() {
    window.value = 100500;
    return window.value;
}

function Preview() {
    let button1 = document.createElement('button');
    button1.innerHTML = 'Value';
    button1.onclick = function() {
        alert(window.value);
    }
    document.documentElement.append(button1);
}

function Increment() {
    let button2 = document.createElement('button');
    button2.innerHTML = '+1';
    button2.onclick = function() {
        window.value++;
        alert(window.value);
    }
    document.documentElement.append(button2);
    return window.value;
}

Initial();
Increment();
Preview();