Question

今天我学会了如何用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);

Answer 1

您需要了解JavaScript中的范围。

由于您在button1中声明shopDraw，因此只能在shopDraw（以及shopDraw内的任何函数 - 中显示 - 这是一个名为“闭包”的概念。）

如果您在...之外声明button1，button2，button3，button4，br1，br2和br3你的功能，它会工作正常，例如

var br1;
var br2;
var br3;
var button1;
var button2;
var button3;

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

            button1 = document.createElement('input');
            // etc

请注意，在该功能中，我不再拥有var br1 = ...，而只是br1 = ...

Answer 2

这是一个范围问题。

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

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

var button1;

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

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

JS：带功能的耳朵按钮有问题

2 个答案: