How to change state of a message to be true or false in jquery?

Question

Gcobani Mkontwana on 7 Nov 2019

0
Link

Direct link to this question

https://www.mathworks.com/matlabcentral/answers/489713-how-to-change-state-of-a-message-to-be-true-or-false-in-jquery

Answered: Christopher Stapels on 7 Nov 2019

Hi Team

I want to change the status of a message to be true, when the button is clicked 'on' and vice versa when is clicked off to be off. So far the functionality seem working not according to what i need it to be. e.g If my button is off, button continues to previous state as true(on). Off which i dont want that, want current state the button to be it remain and keep its value. Like if its on should be remain its value as on, same applies to off logic. I am struggling to get this work. I show you my code so far what i have done.

<!---HTML code---->
<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><br/>
  <div class ="success"></div>
  <div class = "warning"></div>
<div class="col-md-2 text-center"> 
<button id="singlebutton" name="singlebutton" class="btn btn-danger" 
  onclick="BtnOff();">Off</button> <br>
 </div>
  <!------
  ---->
  <br/>
<div class = "col-md-2 text-center">
  <button id = "singlebtn" name="singlebtn" class="btn btn-success" 
  onclick = "BtnOn();">On</button> <br>
</div>
</body>
</html>
<!----Javascript code---->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  
  function BtnOff() {
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=D****&field8=0',
      type:'GET',
      data:{
      type:'text'
      },
      success:function(response){
        alert(response);
        $('div.warning').html('status changed to zero').delay(1000).fadeOut();
        $('#singlebutton').append(data);
         }
    
    });
    //setTimeout("Subscribe()", 100);
  
    }
  // second button to unsubscribe.
  function BtnOn() {
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=*****&field8=1',
      type:'GET',
      data:{
      type:'text'
      },
      success:function(response){
        alert(response);
        $('div.success').html('status changed to one').delay(1000).fadeOut();
        $('#singlebtn').append(data);
         }
    
      });
    //setTimeout("UnSubscribe()", 100);
  }
    
</script>  