So I am learning Dom manipulation and using forms with vanilla Javascript and cannot figure out what I am doing wrong. Right now I just want to be able to click submit and have it console.log the string 'Message Sent' and then reset the form. However when I submit it alters the URL to some weird output and does not console log but instead looks like it refreshes the page but the link still remails altered to "http://localhost:53865/?senderName=&senderEmail=&senderMessage=++++++++++++"
const form = document.querySelector('form')
//? Form Submit Button
const button = document.createElement('button')
button.setAttribute('type','submit')
button.textContent = 'Submit'
button.setAttribute('onClick','submit()');
form.appendChild(button)
function submit(evt) {
evt.preventDefault();
console.log('Message Sent!')
resetForm();
}
function resetForm() {
nameInput.value = '';
emailInput.value = '';
textArea.value= '';
}
document.querySelector('.container').appendChild(form)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./index.css">
<script src = './index.js' defer></script>
</head>
<body>
<div class="container">
<form>
<input id = 'contact-form'
type="text"
name="senderName"
id = "senderName"
value = ""
placeholder = 'Name'
/>
<input
type="text"
name="senderEmail"
id = "senderEmail"
value = ""
placeholder = 'Email'
/>
<textarea
type="text"
name="senderMessage"
id = "senderMessage"
value = ""
placeholder = 'Message'
/>
</form>
</div>
</body>
</html>