Предотвращения обновления сайта через форму

const productImage = document.getElementById("product-image");
const productPrice = document.getElementById("product-price");
const productName = document.getElementById("product-name");
const addButton = document.getElementById("submit-button");
// const productGallery = document.getElementById("product-gallery");

addButton.addEventListener('click', function(event) {

  let newproductCard = document.createElement('div')
  newproductCard.classList.add('product-card')

  let newproductImage = document.createElement('img')
  newproductImage.classList.add('product-image')
  //пока не работает//

  let price = parseInt(document.getElementById("product-price").value);
  let newproductPrice = document.createElement('div')
  let newproductPriceText = document.createTextNode(`${price}`)
  newproductPrice.appendChild(newproductPriceText)
  productPrice.classList.add('product-price')

  let name = document.getElementById("product-price").value;
  let newproductName = document.createElement('div')
  let newproductNameText = document.createTextNode(`${name}`)
  newproductName.classList.add('product-name')
  newproductName.appendChild(newproductNameText)

  newproductCard.appendChild(newproductImage)
  newproductCard.appendChild(newproductPrice)
  newproductCard.appendChild(newproductName)
  productGallery.appendChild(newproductCard)

})

<main>
  <form class="form-field">
    <input type="file" id="product-image" placeholder="Картинка товара" accept="image/*" />
    <input type="text" id="product-price" placeholder="Цена товара" />
    <input type="text" id="product-name" placeholder="Название товара" />
    <input type="submit" id="submit-button" value="Добавить" />
  </form>
  <div class="product-gallery">
    <div class="product-card">
      <img class="product-image" src="https://picsum.photos/300?random=1" />
      <div class="product-price">300 Руб.</div>
      <div class="product-name">Ну товар какой-то</div>
    </div>
  </div>
</main>