javascript - JS:烦人的功能按钮

今天，我学习了如何使用JS创建和设计按钮之类的对象。
然后发生了问题。

在shopDraw（）（创建按钮）并尝试使用shopClose（）从另一个函数中杀死它们后，我得到了错误：“ ReferenceError：未定义button1”。我试图从shopDraw（）做同样的事情，但它也返回错误。我究竟做错了什么？

如果我在警报后尝试将代码从shopClose（）粘贴到shopDraw（），则可以轻松擦除它们！

function shopDraw() {
                shopOpened=true;
                var br1 = document.createElement('br');
                var br2 = document.createElement('br');
                var br3 = document.createElement('br');

                    var button1 = document.createElement('input');
                    button1.type = 'button';
                if (swordBought===false)  {button1.value = 'Приобрести меч                 '; swordBought=true;}
                else {button1.value='Улучшить меч'}
                button1.addEventListener('click', function() {shop(1)}, false);

                var button2 = document.createElement('input');
                    button2.type = 'button';
                if (armorBought===false)  {button2.value = 'Приобрести броню           '; armorBought=true;}
                else {button2.value='Улучшить броню'}
                button2.addEventListener('click', function() {shop(2)}, false);

                var button3 = document.createElement('input');
                    button3.type = 'button';
                if (bootBought===false)  {button3.value = 'Приобрести сапоги          '; bootBought=true;}
                else {button3.value='Улучшить сапоги'}
                button3.addEventListener('click', function() {shop(3)}, false);


                var button4 = document.createElement('input');
                    button4.type = 'button';
                button4.value='Восстановить здоровье'
                button4.addEventListener('click', function() {shop(4)}, false);


                    document.body.insertBefore(button1, BattleLogger);
                document.body.insertBefore(button2, BattleLogger);
                document.body.insertBefore(br1, button2);
                document.body.insertBefore(button3, BattleLogger);
                document.body.insertBefore(br2, button3);
                document.body.insertBefore(button4, BattleLogger);
                document.body.insertBefore(br3, button4);}

function shopClose(){
            button1.parentNode.removeChild(button1);
            button2.parentNode.removeChild(button2);
            button3.parentNode.removeChild(button3);
            button4.parentNode.removeChild(button4);
            br1.parentNode.removeChild(br1);
            br2.parentNode.removeChild(br2);
            br3.parentNode.removeChild(br3);

最佳答案

这是一个范围问题。

例如，var button1 = document.createElement('input');是在shopDraw()内部创建的，因此button1仅在该函数中可用。在shopClose()中未定义。

您可以通过在函数外部声明变量来解决此问题：

var button1;

function shopDraw() {
    button1 = document.createElement('input');
    ...
}

function shopClose() {
    button1.parentNode.removeChild(button1);
}