I am trying to create a VF page with the search fields. when we click on Search Interaction Button. results should show.

please refer to the below code and correct me

/** VF Code */
<apex:page standardController="Interaction__c" extensions="InteractionClass" docType="html-5.0" id="Page">
    <apex:form id="form">
        <apex:actionFunction name="savedata" action="{!sendData}" reRender="resultPanel" status="myStatus">
            <apex:param name="firstParam" assignTo="{!selectedStatus}" value="" />
            <apex:param name="secondParam" assignTo="{!assignedID}" value="" />
        </apex:actionFunction>
        <apex:sectionHeader title="Enter Details to Search Interaction"/>
        <apex:pageblock id="pb">
            <apex:pageblocksection columns="1" id="pbs">
                <apex:commandButton action="{!URLFOR($Action.Interaction__C.New)}" value="Create New Interaction" />
                <apex:input label="Interaction ID" value="{!interactionID}"/>
                <apex:inputfield value="{!Interaction__c.Interaction_Date_Time__c}" id="date"/>                
                <apex:inputField value="{!Interaction__c.Status__c}" id="status"/>
                <apex:inputField value="{!Interaction__c.Assigned_Group__c}" id="GroupID"/>
                <apex:inputField value="{!Interaction__c.Interaction_Assigned_To__c}" id="AssignedTo"/>
                <apex:commandButton action="{!searchInteraction}" value="Search Interaction" onclick="getValues();"/>
            </apex:pageblocksection>
            
            <apex:pageBlockTable value="{!Interactions}" var="i" rendered="{!displayResults}">
                <apex:column headerValue="Action" width="55">
                    <apex:commandLink value=" Edit " action="{!URLFOR($Action.Interaction__C.Edit,i.id)}"/> |
                    <apex:commandLink value=" Del" action="{!URLFOR($Action.Interaction__C.Delete,i.id)}"/>
                </apex:column>
                <apex:column headerValue="Interaction ID" >
                    <apex:commandLink value="{!i.name}" action="/{!i.id}"/> 
                </apex:column>
                <apex:column value="{!i.Interaction_Date_Time__c}"/> 
                <apex:column value="{!i.Status__c}"/> 
                <apex:column value="{!i.Assigned_Group__c}"/> 
                <apex:column value="{!i.Interaction_Assigned_To__c}"/> 
            </apex:pageBlockTable>
        </apex:pageblock>
    </apex:form>
    <script type="text/javascript">
    function getValues()
    {
        var statusval=document.getElementById('Page:form:pb:pbs:status').value;
        // alert(statusval);
        var ag=document.getElementById('Page:form:pb:pbs:GroupID').value;
        //alert(ag);
        var ap=document.getElementById('Page:form:pb:pbs:AssignedTo').value;
        //alert(ap);
        var dt=document.getElementById('Page:form:pb:pbs:date').value;
        // alert(dt);
        savedata(statusval,ap);
    }
    </script>
</apex:page>

/** Controller Code **/
public class InteractionClass {
    Public String interactionID {get; set;}
    Public Datetime interactiondttm {get; set;}
    Public String selectedStatus {get; set;}
    Public String assignedID {get; set;}
    Public Boolean displayResults {get; set;}
    public String result{get;set;}
    Public List<Provider_Group__C> assignedGroupTemp=new List<Provider_Group__C>();
    Public List<Interaction__C> searchInteractions{get; set;}
        
    Public date intdate {get; set;}
    
    public InteractionClass(ApexPages.StandardController stdController) {
                displayResults=false;
    }
    
    Public PageReference CreateInteraction(){
        PageReference pr = new PageReference('/apex/CreateInteractionPage');
        return pr;
    }
    public string sendData(){
        result='You have entered : 1 - '+selectedStatus+' 2 -'+assignedId;
        return result;
            }
    Public List<Interaction__C> getInteractions(){
        
        searchInteractions=[select ID,Name,Interaction_Date_Time__c,Status__C,Assigned_Group__c,Interaction_Assigned_To__c 
                            from Interaction__C 
                            WHERE Status__C =:selectedStatus
                            ORDER BY Name ASC limit 25];
        return searchInteractions;
    }
    
    Public PageReference searchInteraction(){
        displayResults=true;
        getInteractions();
        return null;
           }
  }

I am stuc on this challenge and its very frustrating. 

For some reason I cannot save the component code, i get an error message when trying to save:

Failed to save undefined: No EVENT named markup://c:addItemEvent found : [markup://c:campinglist]: Source


Here is the code im trying to save. anyone know why it wont allow me to save it?

<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
    
    <div class="slds-page-header" role="banner">

      <div class="slds-grid">

        <div class="slds-col">

          <p class="slds-text-heading--label">Camping Items</p>

          <h1 class="slds-text-heading--medium">My Camping Items</h1>

        </div>

      </div>

    </div>

      
  <div aria-labelledby="newitemform">

      <fieldset class="slds-box slds-theme--default slds-container--small">
    
        <c:campingListForm />
    
      </fieldset>

    </div>
    
    
     <aura:attribute name="items" type="Camping_Item__c[]"/>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping List Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>