In the below code, I am trying to `console.log` the form input value when a button gets clicked. However, upon the button click, the value is only getting logged momentarily before disappearing.
why is this happening and how to resolve it?

```js
document.querySelector("button").addEventListener("click",function(){
  const listItem = document.querySelector("input").value;
  console.log(listItem);
});
```

```html
<body>  
  <form action="">
    <input type="text">
    <button class ="btn btn-lg btn-primary" type="submit"> ADD </button>
  </form>
</body>
```