变量在函数外部调用时未定义，但在函数内部调用时有效

Question

我有一个函数可以创建一个 html dom 模式 window 带有一个文本框和一个关闭它的按钮。单击关闭按钮时，文本框的值存储在一个变量中。该变量（据我所知）是全局的，不限于模态 window 函数内部。我设置了它，以便在单击关闭按钮时，连续打开 2 个警报，均以变量作为消息。第一个警报是从模态 window 函数中调用的，其消息读取为文本框的值。第二个警报是从函数外部调用的，它只是说“未定义”。我怎样才能让它在函数外部调用时，变量不会显示为未定义？

编辑澄清：此代码将运行作为 javascript 小书签，将模态 window 注入网页，并且我显示的代码目前是完整范围运行.

的代码

(async () => {
    let textValue;
    let myAlert = async(bodyText) => {
        return new Promise((resolve) => {
            let style = document.createElement('style');
            const GUI = document.createElement('div');
            GUI.appendChild(style);
            GUI.style.width = '400px';
            //GUI.style.height = '500px';
            GUI.style.background = 'hsl(0, 0%, 10%)';
            GUI.style.position = 'absolute';
            GUI.style.textAlign = 'center';
            GUI.style.color = 'white';
            GUI.style.top = '0px';
            GUI.style.left = '0px';
            let header = document.createElement('div');
            GUI.appendChild(header);
            header.style.width = '100%';
            header.style.height = '35px';
            header.style.paddingTop = '2px';
            header.style.fontSize = '1.5rem';
            header.style.textAlign = 'center'
            header.innerText = 'Alert';
            let loop;
            let close = document.createElement('button');
            header.appendChild(close);
            close.style.height = '45px';
            //close.style.paddingTop = '10px';
            //close.style.paddingRight = '15px';
            close.style.position = 'absolute';
            close.style.top = '0px';
            close.style.right = '0px';
            close.innerText = 'OK';
            close.onclick = () => {
                var textValue = document.getElementById('inputText').value;
                alert(textValue);
                resolve();
                GUI.remove();
                clearInterval(loop);
            };
            let body = document.createElement('div');
            GUI.appendChild(body);
            body.innerHTML = bodyText;
            body.style.minHeight = '70px';
            body.id = 'body';
            let lineBreak = document.createElement('br')
            body.appendChild(lineBreak);
            let inputText = document.createElement('input');
            body.appendChild(inputText);
            inputText.type = 'text';
            inputText.value = 'value';
            inputText.id = 'inputText';
            document.body.append(GUI);
        });
    };
    (async function() {
        await myAlert('Alert');
        alert(textValue);
    })();
})();

Answer 1

textValue 超出了该函数的范围，试试这个：

let textValue;
    (async () => {
        let myAlert = async(bodyText) => {
            return new Promise((resolve) => {
                let style = document.createElement('style');
                const GUI = document.createElement('div');
                GUI.appendChild(style);
                GUI.style.width = '400px';
                //GUI.style.height = '500px';
                GUI.style.background = 'hsl(0, 0%, 10%)';
                GUI.style.position = 'absolute';
                GUI.style.textAlign = 'center';
                GUI.style.color = 'white';
                GUI.style.top = '0px';
                GUI.style.left = '0px';
                let header = document.createElement('div');
                GUI.appendChild(header);
                header.style.width = '100%';
                header.style.height = '35px';
                header.style.paddingTop = '2px';
                header.style.fontSize = '1.5rem';
                header.style.textAlign = 'center'
                header.innerText = 'Alert';
                let loop;
                let close = document.createElement('button');
                header.appendChild(close);
                close.style.height = '45px';
                //close.style.paddingTop = '10px';
                //close.style.paddingRight = '15px';
                close.style.position = 'absolute';
                close.style.top = '0px';
                close.style.right = '0px';
                close.innerText = 'OK';
                close.onclick = () => {
                    var textValue = document.getElementById('inputText').value;
                    alert(textValue);
                    resolve();
                    GUI.remove();
                    clearInterval(loop);
                };
                let body = document.createElement('div');
                GUI.appendChild(body);
                body.innerHTML = bodyText;
                body.style.minHeight = '70px';
                body.id = 'body';
                let lineBreak = document.createElement('br')
                body.appendChild(lineBreak);
                let inputText = document.createElement('input');
                body.appendChild(inputText);
                inputText.type = 'text';
                inputText.value = 'value';
                inputText.id = 'inputText';
                document.body.append(GUI);
            });
        };
        (async function() {
            await myAlert('Alert');
            alert(textValue);
        })();
    })();

变量在函数外部调用时未定义，但在函数内部调用时有效

Variable coming up as undefined when called outside of a function, but working when called inside the function

html

javascript

modal-window