Javascript function is not working when called multiple times

Question

I'm creating a function that checks id values for 0 or 1. This function is to perform following task (Triggering SMS function):

1) If on page load, value of any id is 1(true), this function will not allow sms trigger for this id, but if value goes to 0(false) and again returns to 1(true) it will trigger a sms function.

2) If on page load, value of id is 0(false), this function will allow SMS triggering if its value changes to 1 (true) any time.

Note: When I check this function with value1 or value2or value3 separately it is working fine. But when I execute this funciton for multiple ids like onloadcheck(value1); onloadcheck(value2); it creates problem. No error but not working in proper manner.

Please help me. Thank you.

$(document).ready(function() {
setInterval(function() {
rand_val();
}, 1000);   

});


//check initial values of all ids 


var onloadcheck = (function() {
    var executed = false;
    var enableit = false;
    return function(x) {
        if (!executed) {
            executed = true;
            if(x==1){enableit = false;}
            if(x==0){enableit = true;}
        }
        if(x==1 && enableit ){
        console.log("Sending SMS");
        enableit = false;
        }
        if(x==0 ){
        enableit = true;
        }
    };
})();






//generates random values 
function rand_val(){
document.getElementById("demo1").innerHTML =
Math.floor(Math.random() * 2);
var value1= $("#demo1").text();

document.getElementById("demo2").innerHTML =
Math.floor(Math.random() * 2);
var value2= $("#demo2").text();


document.getElementById("demo3").innerHTML =
Math.floor(Math.random() * 2);
var value3= $("#demo3").text();

onloadcheck(value1);
onloadcheck(value2);


}

Here is HTML code :

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Test SMS</title>
<style>
</style>
</head>
<body>

        <p>Test SMS Triggers</p>

        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

if(x==1 && enablesms ){ did you mean enableit to go here? As i don't see a enablesms elsewhere in your code — Patrick Evans
– Patrick Evans, Commented Apr 23, 2018 at 0:49
Define "not working", "creates problem," and "not working in the proper manner." How does the result differ from your expectations? — mc01
– mc01, Commented Apr 23, 2018 at 3:37
Sorry for bad english that you found it difficult to understand. TJBlackman gave the solution that working for me — Ranjit Singh Shekhawat
– Ranjit Singh Shekhawat, Commented Apr 23, 2018 at 13:24

TJBlackman · Accepted Answer · 2018-04-23 03:43:33Z

The reason this is difficult is because you need to get their current value and compare it with their previous value. So to do that, you need to always store a copy of their previous value.

In my example, I store a copy of their previous value in an object, then each time there is an update, I get the old value from my object, the new value from the element, and compare the two. Then don't forget to save the new value in your object!!

JS FIDDLE

<p id="demo1">1</p>
<p id="demo2">0</p>
<p id="demo3">0</p>

<button type="button">Update &amp; Re-Check Values</button>

<script>
// cache DOM elements for quick reference
var demo1 = $('#demo1');
var demo2 = $('#demo2');
var demo3 = $('#demo3');

// store their current values in object
// this is how we will reference their previous values in the future
var stored_values = {
  demo1: demo1.text(),
  demo2: demo2.text(),
  demo3: demo3.text()
}; 


// loop through all elements
// get their current value from .text()
// get their PREVIOUS value from the object we made above
// compare values with our custom compare function (define below)
// finally, save the current value in our object
function checkValues(){
    [demo1, demo2, demo3].forEach(function(item){
    var element_id = item.attr('id');
    var currentValue = item.text(); 
    var previousValue = stored_values[element_id];
        compareValues(currentValue, previousValue, element_id);
    stored_values[element_id] = currentValue; 
  });
}


// compare values passed in, and determine what to do
function compareValues(current, previous, elementID){
    if (previous == 0 && current == 1){
    alert('Sending SMS for '+ elementID + '!!!');
  } else {
    return; // do nothing
  }
}


// on button click
// assign new value, then checkValue()
$('button').click(function(){
    $('p').each(function(index, element){
        var number = Math.round(Math.random()); 
    $(element).text(number); 
  });
  checkValues(); 
});
</script>

Collectives™ on Stack Overflow

Javascript function is not working when called multiple times

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related