CODEWITHSUNDEEP
javascriptfunctionbutton
Artem Suchkov
Artem Suchkov

Reputation: 25

JS: trouble with earsing buttons with function

Today i learned how to create and earse objects like buttons with JS. And then a problem happened.

After shopDraw() (to create buttons) and trying to kill them with shopClose() from another function i get error: "ReferenceError: button1 is not defined". I've tried doing the same from shopDraw() but its returning error too. What am i doing wrong?

If i try to paste code from shopClose() to shopDraw() after alert, it is erasing them easly!

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

Upvotes: 1

Views: 39

Answers (2)

Matthew Rapati
Matthew Rapati

Reputation: 5696

It is a scope issue.

For example, var button1 = document.createElement('input'); is created inside of shopDraw(), so button1 is only available within that function. In shopClose() it is undefined.

You can fix this by declaring the variable outside of the functions:

var button1;

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

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

Upvotes: 1

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

You need to learn about scope in JavaScript.

Since you declare button1 in shopDraw, it's only visible within shopDraw (and any functions inside of shopDraw - that's a concept called "closures").

If you declare button1, button2, button3, button4, br1, br2, and br3 outside of your functions, it will work fine, e.g.

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

Note that in the function, I no longer have var br1 = ..., but just br1 = ...

Upvotes: 1

Related Questions