Soy un principiante en la programación de Javascript. El método innerHTML no funciona en una función para actualizar el contenido de un elemento HTML.

Mi código JS es:

 $(':button').on("click", function() { // reference clicked button via: $(this) var buttonElementId = $(this).attr('id'); var sliceId = buttonElementId.charAt(buttonElementId.length - 1); bringData(sliceId); }) function bringData(id) { var a = localStorage.getItem("Blogs") var b = JSON.parse(a) console.log(b[id].blogHeader) document.getElementById("foo").innerHTML = b[id].blogHeader }

Los botones y el elemento que tiene una identificación de "foo" están en diferentes páginas HTML. Quiero actualizar el contenido de ese elemento después de hacer clic en cualquier botón de otra página, pero no funciona. El contenido sigue siendo el mismo. ¿Cuál es mi error?

Nota: si uso la propiedad innerHTML fuera de una función, funciona y el contenido cambia.