Tengo una imagen de fondo que se selecciona aleatoriamente al inicio de la sesión, pero se puede cambiar con un botón que activa una función de clic.

selectImg() se ejecuta al cargar la página, mientras que resetImg() es lo que se ejecuta cuando se hace clic en el botón de reinicio con el nombre apropiado. ¿Cómo puedo hacer esto para que, en lugar de volver a cargar toda la página, simplemente actualice el elemento individual para cambiar la imagen, preferiblemente sin usar bibliotecas como jQuery?

 var images = new Array("assets/img/beach.jpg", "assets/img/city.jpg", "assets/img/valley.jpg", "assets/img/hills.jpg", "assets/img/rocky-beach.jpg", "assets/img/trees-lake.jpg", "assets/img/trees.jpg"); function selectImg() { if ("headerImage" in sessionStorage) { document.getElementById('headerImage').style.backgroundImage = "url(" + sessionStorage.getItem("headerImage") + ")"; } else { var selector = Math.floor(Math.random() * images.length); sessionStorage.headerImage = images[selector]; document.getElementById('headerImage').style.backgroundImage = "url(" + sessionStorage.getItem("headerImage") + ")"; } } function resetImg() { sessionStorage.removeItem("headerImage"); location.reload(); }