Javascript event.prevent default not working on wordpress

Question

I am making a custom HTML page to add to a WordPress website. I created a form so I could call an API on the submit of that form and log the response to the console but on submitting the page reloads. How can I fix this?

HTML

<div>
  <div>
  <form id="form">
    <input class="input" placeholder="address" type="text">
    <button type="submit">Submit</button>
  </form>
  </div>
</div>

<script>
const form = document.querySelector('#form');
const addressValue = document.querySelector('.input').value;
form.addEventListener('submit', (event)=>{
  const xhr = new XMLHttpRequest();
  xhr.open('GET', http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue);
xhr.onload = ()=>{
 console.log(xhr.response);
}
xhr.send();
event.preventDefault();
})

</script>

Answer 1

I see in this line you haven't put the xhr url request between quotes it maybe do to that.

 xhr.open('GET', http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue);

it should be like that

xhr.open('GET', 'http://www.zillow.com/webservice/GetSearchResults.htm?zws-id=<X1-ZWz171ov3ap3pn_4hjdy>>&address=addressValue');