Button count undefined PHP AJAX JAVASCRIPT

Question

I have the following problem:

1/ I have this code:

index.html:

<script type="text/javascript">
            function doOnOrientationChange()
            {
                switch(window.orientation) 
                {  
                    case -90:                 
                        document.getElementById("landscape").style.display="block";
                    break;
                    case 90:              
                        document.getElementById("landscape").style.display="block";                 
                    break;
                default:                   
                    document.getElementById("landscape").style.display="none";
                break;                            
                }
            }

            //Listen to orientation change
            window.addEventListener('orientationchange', doOnOrientationChange);  

            function getXMLHttp()
            {
                var xmlHttp
                try
                {
                    xmlHttp = new XMLHttpRequest();
                }
                catch(e)
                {
                try
                    {
                            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                    }
                catch(e)
                    {
                    try
                        {
                        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                    catch(e)
                        {
                        alert("AJAX not supported.")
                        return false;
                        }
                    }
                }
            return xmlHttp;
            }

function MakeRequest()
{
   var xmlHttp = getXMLHttp();
   xmlHttp.onreadystatechange = function()
   {
     if(xmlHttp.readyState == 4)
     {
      HandleResponse(xmlHttp.countText);
     }
   }
   xmlHttp.open("GET", "compteur.php", true); 
   xmlHttp.send(null);
 }


 function HandleResponse(response)
 {
   document.getElementById('text').innerHTML = response;
  }
        function changement() {

        document.getElementById('bouton').style.display = 'none';
        var count= '<?php echo file_get_contents("compteur.txt");?>';
        var last =  count%10;
        var beforelast =  count%100;

        if ( count>9998 &&  count<99999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '160px';
            document.getElementById('text1').style.fontSize = '160px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>99998 &&  count<999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '135px';
            document.getElementById('text1').style.fontSize = '135px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>999998 &&  count<9999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '120px';
            document.getElementById('text1').style.fontSize = '120px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>9999998 &&  count<99999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '110px';
            document.getElementById('text1').style.fontSize = '110px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>99999998 &&  count<999999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '95px';
            document.getElementById('text1').style.fontSize = '95px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>999999998 &&  count<9999999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '89px';
            document.getElementById('text1').style.fontSize = '89px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if ( count>9999999998 &&  count<99999999999){
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '85px';
            document.getElementById('text1').style.fontSize = '85px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===0 && beforelast===10){
            document.getElementById("text1").innerHTML = "th";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===0){
            document.getElementById("text1").innerHTML = "st";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===1 && beforelast===11){
            document.getElementById("text1").innerHTML = "th";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===1){
            document.getElementById("text1").innerHTML = "nd";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===2 && beforelast===12){
            document.getElementById("text1").innerHTML = "th";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else if (last===2){
            document.getElementById("text1").innerHTML = "rd";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        else {
            document.getElementById("text1").innerHTML = "th";
            document.getElementById('text').style.display = 'block';
            document.getElementById('text1').style.display = 'block';
            document.getElementById('text').style.fontSize = '195px';
            document.getElementById('text1').style.fontSize = '195px';
            document.getElementById('textg').style.display = 'block';
            document.getElementById('textg1').style.display = 'block';
            document.getElementById('texth').style.display = 'block';
            document.getElementById('texth1').style.display = 'block';
            document.getElementById('v').style.display = 'none';
            document.getElementById('buttons').style.display = 'block';
            }
        }
</script>
<body>
 <span id="space" ><input onclick='MakeRequest();' onmouseup="changement()"       type="button" value="PUSH" id="bouton"/></span>
 </body>

compteur.php:

<?php

$clicks = file_get_contents("compteur.txt");
$clicks++;

$fp = fopen("compteur.txt", "w+");

while ( !flock($fp, LOCK_EX) ) {    
    usleep(500000); // Delay half a second
}

fwrite($fp, $clicks);
fclose($fp);
flock($fp, LOCK_UN);

 ?>

And when I click the button, everything seems to function. No errors in the console. But instead of showing me the number of clicks, it just shows "undefined".

Thank you for your help.

TheMightyKnight

Answer 1

XMLHttpRequest objects don't have a property called countText. In MakeRequest, you want responseText instead:

HandleResponse(xmlHttp.responseText);
// Not `countText` ----^