The submit Event Handler isn't working. Where is the bug?

JavaScript
#1 
<form action="#">
  <label for="input">Input: </label>
  <input type="text" class='search_field' placeholder="write something">
  <input type="submit" class='submitItem'>
</form>

<h2>Add to the List</h2>

<div class="display">
  <input type="checkbox">pizza
</div>

<script>
const searchInput=document.querySelector('search_field');
const submitBtn=document.querySelector('.submitItem');
const UIField=document.querySelector('.display')

submitBtn.addEventListener('submit',function(){

alert(searchInput.value)			/* 
			      e.preventDefault();
			      
			      const markup=`<input type="checkbox"> ${searchInput.value}`;
			      
			      UIField.insertAdjacentHTML('beforeend',markup) */
      
})
</script>
#2

You missed the dot(.) In querySelector(‘search_field’);
It should be querySelector(’.search_field’);

1 Like
#3