Button click count javascript php ajax

Question

I want a button click count to increment each time the button is being clicked.

For that I have a txt file with the count, a php file for the function, and a main page with the button, the ajax and the functions that depend of the count variable.

The Changement() function doesn't work: the console says "function undefined". I am blocked. I have been searching for hours on Google and found nothing (either too complicated or not what I was looking for) !

My goal is just to be able to store the number of times the button was pushed and then show the user what was the number of times the button was being pushes. It's for a school work.

I precise I am fairly new to programming! I only know CSS, HTML, Javascript and some basics of PHP.

Here is my code:

Main page:

    $('#bouton').click(function(){ 
        $.ajax("compteur.php"); 
    }); 

    function changement() {
        document.getElementById('bouton').style.display = 'none';       
        var count=</script><?php echo file_get_contents("compteur.txt");?><script>
        var last =  count%10;

        var beforelast =  count%100;

       count = document.getElementById('text');
    }

    <span id="space" ><input onmouseup="changement();" type="button" value="PUSH"       id="bouton"/></span>

PHP file:

    $nb = get_file_contents('compteur.txt'); 

    $nb = (int)$nb; 

    put_file_contents('compteur.txt, $nb++);

txt file:

Actually, i'm putting my entire code for the main page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="minimal-ui">
    <title>Humanity</title>
    <meta name="author" content="T LL" />
    <link rel="shortcut icon" href="Images/Favicon/yin.ico">
    <style>

        *{margin: 0px; padding: 0px;}
        #white {width: 50%; position: absolute; right: 0px; height: 100%; background-color: white;  text-align: left; color: black;}
        #white h1{ font-size: 200px; text-decoration: underline; position: absolute; top: 100px;}
        #black {width: 50%; position: absolute; left: 0px; height: 100%; background-color: black; text-align : right; color: white;}
        #black h1{ font-size: 200px; text-decoration: underline; position: absolute; top: 100px; right: 0px;}
        #text{ position: relative; top: 45%; font-size: 195px;}
        #text1{ position: relative; top: 47.4%; font-size: 150px;}
        #space { width: 100%; z-index:100;}
        #space input{
            width: 550px;
            height: 300px;
            text-align: center;
            border-radius: 20px;
            color: white;
            cursor: pointer;
            background-color: black;
            border: 3px outset white;
            font-size: 100px;
            overflow: visible;
            position: absolute; right: -275px; top: 65%;
            display: block;
            z-index: 500;
        }
        #space input:active {
            border: 3px inset white;
            padding:4px 2px 2px 4px;
            color: silver;
        }
        #landscape{
            position: absolute;
            top: 0px;
            left: 0px;
            background: #000000;
            width: 200%;
            height: 200%;
            display: none;
            z-index: 20000;
            opacity: 1;
            margin:0 auto;
        }
        #landscape div{
            color: #FFFFFF;                                 
            opacity: 1;
            position: absolute;
            top: 20%;
            text-align: center;
            display: inline-block;
            width: 100%;
            font-size: 30px;
        }
        #textg{
        font-size: 150px;
        position: absolute;
        top: 29%;
        right: 5px;
        display:none;
        }
        #textg1{
        font-size: 150px;
        position: absolute;
        top: 29%;
        display:none;
        }
        #texth{
        font-size: 60px;
        position: absolute;
        top: 68%;
        right: 5px;
        display: none;
        }
        #texth1{
        font-size: 60px;
        position: absolute;
        top: 68%;
        display: none;
        }
        #v{
        position: absolute; right: -427px; top: 26%;
        z-index: 2000;
        display: block;
        }

        @media (min-width:320px) { #black {height:50% ;}
                                   #white {height:50% ;}
        @media (min-width:481px) { #black {height:60% ;}
                                   #white {height:60% ;}
        @media (min-width:641px) { #black {height:80% ;}
                                   #white {height:80% ;}
        @media (min-width:961px) { #black {height:115% ;}
                                   #white {height:115% ;}
        @media (min-width:1025px) { #black {height:150% ;}
                                   #white {height:150% ;}
        @media (min-width:1281px) { #black {height:200% ;}
                                   #white {height:200% ;}

        #buttons {position:absolute; right: -103px; top: 80%; display:none;}

    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <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); 


        $('#bouton').click(function(){
        $.ajax("compteur.php");
        });

        function changement(){
        document.getElementById('bouton').style.display = 'none';

        var count=</script><?php echo file_get_contents("compteur.txt");?><script>
        var last =  count%10;
        var beforelast =  count%100;
        count = document.getElementById('text');

        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';
            }
        }

        // When ready...
        window.addEventListener("load",function() {
        // Set a timeout...
            setTimeout(function(){
            // Hide the address bar!
                window.scrollTo(0, 1);
            }, 0);
        });
    </script>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "f8f36478-02d9-4628-97f5-c1938bb541ed", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
</head>
<body onload="doOnOrientationChange();">
<div id="landscape"><div><img id="image" src="rotation.png" /></br>Application is optimized for portrait orientation. </br>Please rotate your device.</div></div>    
    <div id="black">
        <span id="space" ><input onmouseup="changement();" type="button" value="PUSH" id="bouton"/></span>
        <p id="textg">It's</p>
        <p id="texth">time that the butto</p>
        <p id="text" style="display: none;">0</p>
        <p style="font-size:15px; color: white; position: absolute; bottom: 30px; right: 5px;"> © 2014</p>
    </div>
    <div id="white">
        <p id="textg1">&nbsp;the</p>
        <p id="texth1">n is being pushed!</p>
        <p id="text1" style="display: none;">th</p>
        <p style="font-size:15px; position: absolute; bottom: 30px; margin-left: 2px;">TheDevelopper</p>
    </div>
    <footer>
    </footer>
</body>

There isn't enough information here to help you. What do you mean it doesn't function? What are you expecting to see? Are there any javascript errors shown in your browser javascript console? I suspect there should be, because var count=</script><?php echo file_get_contents("compteur.txt");?><script> instead valid JavaScript syntax. — scott.korin, Apr 27 at 15:40
When I see a question saying "it doesn't work" without explaining in which way it doesn't work, I'll vote to close as "lacks sufficient information to diagnose the problem" or "unclear what you're asking" 9 times out of 9. "It doesn't work" doesn't give anyone a starting point for examining the problem. Explain what results you're getting and how they differ from the intended results, and include any error messages you received. — Adi Inbar, Apr 27 at 16:07

Ramulis · Accepted Answer · 2014-04-27 19:29:46Z

up vote 0 down vote accepted

I am going to go ahead and request a close on this question, not only is the code written horrifically bad but i believe you should head on over to the jquery documentation kindly provided by jquery.

<html>

<head>
<script type="text/javascript">
    window.onload = function(){
        var a = "a";
        var FILE = "ajax_info.txt";
        ajax(function(DATA){
            alert(DATA);
        }, FILE);
    };

    function Button_(DATA){
        alert(DATA);
    };
    function ajax(FUNC, FILE){
        var xmlhttp;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                FUNC(xmlhttp.responseText);
            }
        }
        xmlhttp.open("GET",FILE,true);
        xmlhttp.send();
    };
</script>
</head>
<body>
</body>
</html>

this should get u up to speed :)

edited Apr 27 at 19:29

answered Apr 27 at 16:05

Ramulis
374

Tanks for your help. That was very helpful... – user3578549 Apr 27 at 16:11

BTW I hope you didn't think that is all my code... This is just the code that needs to be corrected. All the rest functions perfectly well. And if you have nothing better to tell me than: your code is horrible! I would prefer you to stay quiet. – user3578549 Apr 27 at 16:13

I didn't mean to offend. but to defend my statement, just about every line you have is done very badly. your welcome for my guidance though jquery does have amazing directory of its documentation. though.. i think this is simple enough to write in javascript. However, since you seem to be processing temporary data such as a button click counter i would suggest java or python for the processing instead of creating a temporary file on your server and deleting it for each user. (unless its suppose to count every click). still it would be a bad decision because each person would have.. – Ramulis Apr 27 at 16:18

to have the file read and some users may have the old file data not giving accurate data that you want returned. – Ramulis Apr 27 at 16:19

Side not, if your using this to count the clicks for analytics i would suggest you use python to communicate with mysqli. – Ramulis Apr 27 at 16:20

show 21 more comments

asked	2 months ago
viewed	130 times
active	2 months ago

current community

your communities

more stack exchange communities

Button click count javascript php ajax

1 Answer

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript php ajax button count or ask your own question.

Hot Network Questions

current community

your communities

more stack exchange communities

Button click count javascript php ajax

1 Answer

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript php ajax button count or ask your own question.

Related

Hot Network Questions