CODEWITHSUNDEEP
javascript
CoderJay
CoderJay

Reputation: 63

JavaScript Increment number every time (if statement) is true

In my code I am retrieved data from the data base every 30 seconds using AJAX. I want to use JavaScript to increment variable wht every time data is received from the database (every 30 seconds) and when if statement is true. Below code is working and incrementing to 1 but it doesn't go above 1. Does anyone has a solution for this problem?

      <script>
            $(document).ready(function () {
                   ajax_call = function() {
                   $.ajax({
                   type: "GET",
                   url: "test.php",
                   dataType: "html",           
                   success: function (response) {
                   color = response;
                   console.log(color);
           
               if (color == white){
                    var wht = (function(w) {
                    return function() {
                    w += 1;
                    return w;
                    }
                }(0));
                document.getElementById("memo").value = wht();
           }else{
                console.log("Color is not white");
           }

        var interval = 30000;
        setInterval(ajax_call, interval);

        });
      </script>




       <script>
            const minusButtonFw = document.getElementById('memo-minus');
            const plusButtonFw = document.getElementById('memo-plus');
            var memo = document.getElementById('memo');

            minusButtonFw.addEventListener('click', event => {
            event.preventDefault();
            const currentValue = Number(memo.value);
            memo.value = currentValue - 1;
         });

            plusButtonFw.addEventListener('click', event => {
            event.preventDefault();
            const currentValue = Number(memo.value);
            memo.value = currentValue + 1;
         });
       </script>

Upvotes: 2

Views: 1401

Answers (4)

Mohamed Mufeed
Mohamed Mufeed

Reputation: 1580

First of all your variable wht is a function. If you simply want to keep track of the number of time the if conditions is true you can do it by making the variable static (literaly). you can achive this by storing the variable in a global scope.

Also there are sytax errors in your code too where wht is defined.

try this

$(function () {
    var memo = document.getElementById("memo");
    memo.val = 0;
    var ajax_call = function () {
        $.ajax({
            type: "GET",
            url: "test.php",
            dataType: "html",
            success: function (response) {
                color = response;
                console.log(color);
                if (color == white) {
                    memo.val++;
                    memo.value = memo.val;
                } else {
                    console.log("Color is not white");
                }
            }
        });
    }

    var interval = 30000;
    setInterval(ajax_call, interval);
});

A Note: If the response is managed by you, I would recomend sending the response as json rather than simply sending it as an html with just one value color.

Upvotes: 1

Pavel Alekseev
Pavel Alekseev

Reputation: 1222

Try change the line

document.getElementById("memo").value = wht();

to

document.getElementById("memo").value = wht(document.getElementById("memo").value);

Your full code:

<script>
            $(document).ready(function () {
                   ajax_call = function() {
                   $.ajax({
                   type: "GET",
                   url: "test.php",
                   dataType: "html",           
                   success: function (response) {
                   color = response;
                   console.log(color);
           
               if (color == white){
                    var wht = (function(w) {
                    return function() {
                    w += 1;
                    return w;
                    }
                }(0));
                document.getElementById("memo").value = wht(document.getElementById("memo").value);
           }else{
                console.log("Color is not white");
           }

        var interval = 30000;
        setInterval(ajax_call, interval);

        });
      </script>

Upvotes: 1

dogyear
dogyear

Reputation: 328

You'll need to keep track of "w". Your current setup is using "w" as a parameter to a function. You'd need to keep it outside of the function and increment it from inside the function. You'll also need to wrap that function in an interval Something like the following:

var w = 0;

function setWhite(color) {
    if (color == white) {
        w++;
        document.getElementById("memo").value = w;
    } else {
        console.log("Color is not white");
    }
}

setInterval(function() {
    setWhite(color);
}, 30000);

This should give you what you want. I didn't run the code so there are probably syntactical errors that you'll need to correct.

Upvotes: 1

myjobistobehappy
myjobistobehappy

Reputation: 776

I made an example with setInterval. I made w global so it will work. Try this:

var w = 0;
var interval = setInterval(function() {
    if (color == white) {
        w++;
        document.getElementById("memo").value = w;
    } else {
        console.log("Color is not white");
    }
}, 30000);

Upvotes: 0

Related Questions