在 function 外部调用时出现未定义的变量，但在 function 内部调用时工作

Question

I have a function that creates an html dom modal window with a textbox and a button that closes it. When the close button is clicked, the value of the textbox is stored in a variable. The variable (as far as I know) is global, and is not limited to inside the modal window function. I have it set up so that when the close button is clicked, 2 alerts are opened in succession, both with the variable as their message. The first alert is called from within the modal window function, and its message reads as the value of the textbox. The second alert is called from outside the function, and it just says "undefined". How can I make it so that when called outside of the function, the variable doesn't come up as undefined?

edit for clarification: this code will be run as a javascript bookmarklet that injects the modal window into a webpage, and that the code i showed is currently the full extent of the code that will be run.

 (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 is outside of that function's scope, try this:

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);
        })();
    })();