For my shop page I have a grid view with two columns and options to switch to list view. It's all working well except when the page initially loads; the products are displaying in four columns.

var elements = document.getElementsByClassName("product");
var image = document.getElementsByClassName("attachment-woocommerce_thumbnail size-woocommerce_thumbnail jetpack-lazy-image jetpack-lazy-image--handled lazyloaded");
var i;

function listView(){
  for(i = 0; i < elements.length; i++){
      elements[i].style.width = "100%";
      elements[i].style.height = "15.1vw";
      image[i].style.width = "29%";
      
  }
}

function gridView(){
  for(i = 0; i < elements.length; i++){
      elements[i].style.width = "35%";
      elements[i].style.height = "35vw";
      image[i].style.width = "100%";

      
  }
}

I removed the default style. Is there a way to create a function to run a style only when the page initially loads?