Why would my code seems to work in Codepen but not in my browser console of Google Chrome?

[Elindo]

I am working on this code for over a week on adding and deleting fieldsets. I got it to work on codepen and I was thinking all was good, then I get to try it on VScode and try the Google console, and boom! not working… whaaat??

I even copied and paste it the codepen code directly into vscode… what could possibly be wrong?

[caryaharper]

could you show the code?

Browsers sometimes implement JS differently and that can have an effect.

Google uses the V8 engine for JS and so does nodeJS so testing code in both google and in the terminal is likely to have the same effect

[Elindo]

Man, I am gonna get yelled again for posting a code that was on my previous post… I made a new topic, well because regardless of the code, if anybody would have any information of why it works in codepen and not in Google console, it would be good to know…

Also… the declaration of variables apparently need to be inside the function for the function to try to do anything in the Google console.

The code I have in Codepen are these 2 functions…

console.clear();

const f2parent = document.getElementById ("parentfieldset");
const f22pump = document.getElementById ("fieldsetpump2"); 
const f23pump = document.getElementById ("fieldsetpump3");

const remove2pump = f2parent.removeChild(f22pump); 
const remove3pump = f2parent.removeChild(f23pump);
const add2pump = f2parent.appendChild(remove2pump);
const add3pump = f2parent.appendChild(remove3pump); 



function singlePumpf (){
  if(document.getElementById ("pump1").checked) {
 f2parent.removeChild(f22pump); 
 f2parent.removeChild(f23pump);
    
  }
}

 function doublePumpf(){ 
if(document.getElementById ("pump2").checked) {   

  const f2parent = document.getElementById ("parentfieldset");
  const f22pump = document.getElementById ("fieldsetpump2"); 
  const f23pump = document.getElementById ("fieldsetpump3")
  f2parent.appendChild(remove2pump);
  f2parent.removeChild(f23pump); 
  

}
}

Codepen:

test2

[caryaharper]

What error are you getting

[caryaharper]

If the code you gave me is literally what you are running its not working because those elements only exist on codepen and not the actual dom so you are grabbing elements that do not exist and then you are trying to call a method on null due to that reason which throws an error

[Elindo]

The problem is that once a fieldset is removed from the console, it doesn’t show anymore on your screen, and whatever action you take on the same fieldset you will get an error.

For example… I can delete fieldset 2 and 3 with button 1, then I click button 2 and fieldset 2 will be added in codepen… but if I try that on Google console it will give me errors or just do nothing without showing any errors.

[Elindo]

The problem I have is on adding the elements back on in the console… seems to work awesome in codepen, but the console will only remove them.

The console would also give me an error if an element is removed once, and then another action tries to remove an elment that has already been removed… that would be a minor problem if the console would just only add the element back on.