After replacing the element, none of the JavaScript suddenly works

[Catalactics]

So, I’m trying to make a page where you can essentially change it to what you want. And in order to make it useful, I need to make sure there is a way to save the edited codes and re-apply them. I used the jquery replaceWith and use local storage as the storing system.

//This is for applying it to the page
    let interactiveDiv = $("#interactiveDiv");
	let pageFormatSaved = localStorage.getItem("pageFormat");
	$(interactiveDiv).replaceWith(pageFormatSaved);

//this is to apply the saved page format to the page
function savePageFormat() {
	let x = document.getElementById("interactiveDiv");
	let newPageFormat = x.outerHTML;
	let g = localStorage.getItem("pageFormat");
	localStorage.key("pageFormat");
	localStorage.setItem("pageFormat", newPageFormat);
	console.log("added New Page Format");
}

Please help… I don’t know why it’s not working. Maybe you guys have any other suggestions to this approach, one that has fewer bugs on them?

[chuckadams]

What are the symptoms of it not working? What are you expecting to happen, and what is happening instead?

[Catalactics]

I expect it to do a lot of JavaScript…
If you want to check it out you can go here: https://joshuapelealu.github.io/WebDesign/interactive.html
All it’s supposed to do is on that page right now, but now it just won’t do any JavaScript. It’s for a small school project I have and I haven’t finished it yet as you can see.

[snigo]

@Catalactics

$(interactiveDiv).replaceWith(pageFormatSaved);

This will run only once. If you need this to update as user types (I suppose), you need event listener that will invoke this function every keypress

@Catalactics

let newPageFormat = x.outerHTML;

You need innerHTML here as .replaceWith() replaces only inner HTML without touching the container

@Catalactics

let g = localStorage.getItem(“pageFormat”);
localStorage.key(“pageFormat”);

This looks like unused/unnecessary lines of code

[chuckadams]

@Catalactics

I expect it to do a lot of JavaScript…

Looks like someone’s already gotten to it, but I’ll need more than that in the future, for two reasons:

1. I am incredibly lazy and would rather help people by eyeballing the code here instead of going out and testing it in a pen.
2. Articulating the problem in words will very often lead to you realizing the problem’s cause. This is known as “rubber duck debugging” (i.e. describe your bug to a rubber duck)

[Catalactics]

Well, This function I only want to run once every time the user visits that page, not every time there is a change

@Catalactics

$(interactiveDiv).replaceWith(pageFormatSaved);

When there is a change I used this function to save it

@Catalactics

function savePageFormat() {
let x = document.getElementById(“interactiveDiv”);
let newPageFormat = x.outerHTML;
let g = localStorage.getItem(“pageFormat”);
localStorage.key(“pageFormat”); localStorage.setItem(“pageFormat”, newPageFormat);
console.log(“added New Page Format”);
}

I put the function on every thing that will change the page.

@Catalactics

@Catalactics

let g = localStorage.getItem(“pageFormat”);

localStorage.key(“pageFormat”);

This looks like unused/unnecessary lines of code

and this part is the code I used to store the page code into the local storage so I can call it back later

[Catalactics]

@chuckadams

Looks like someone’s already gotten to it, but I’ll need more than that in the future, for two reasons:

Well, By

@Catalactics

I expect it to do a lot of JavaScript…

I meant none of the javascript runs after the replaceWith ran it. At first I thought maybe because it changed the page and the javascript already run that means it won’t find the DOM. But I tried to fix that problem by starting the rest of the javascript after the element replace is done

[Catalactics]

Alright, So I fixed it.

@snigo

You need innerHTML here as .replaceWith() replaces only inner HTML without touching the container

You were right not to touch the container. So, I grabbed the elements inside it and then remove the element inside the container and append the new one.