onClick需要双击而不需要jquery

Question

我的页面上有2个按钮，我希望在用户点击onclick后更改其内容。但只有在第二次点击后才会有效。之后只需要点击一次即可再次更改。

<button class="event btn btn-primary btn-responsive" type="button" id =<%=eventId %> 
 onclick="myFunctionEvent(this.id,<%=user.getId()%>)">
  Join the Event
</button>

javascript函数

/*EVENT Button*/
 function myFunctionEvent(eventId,userId) {   
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    var checkId;
    var change = document.getElementById(eventId);  
    if (change.innerHTML == "Join the Event")
    {
       change.innerHTML = "I will be there";

       checkId = "1";

       /*xmlhttp.onreadystatechange=errorFunction()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                 var answer = xmlhttp.responseText;
                 alert(answer);
            }
        }   */   
    }
    else {
        change.innerHTML = "Join the Event";
        checkId = "2";  
    }

    xmlhttp.open("GET","updateNotif.jsp?event="+eventId+
                 "&user="+userId+"&checkId="+checkId,true
                );
    xmlhttp.send(); 
}

有什么问题？