CODEWITHSUNDEEP
javascriptjqueryhtml
SPQRInc
SPQRInc

Reputation: 188

Change button's text and function

I'd like to do the following. I got a button like this:

<button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button>

The JS part is this:

var search = new SiteSearch();

Now I'd like to do this:

Once clicked, the label of the button should show Stop search. And the called function should be search.stop(). If the user clicks Stop search, the button should be the Start search button again.

How can I do this in an elegant way?

Upvotes: 1

Views: 595

Answers (6)

Bekir Ersin &#214;ztekin
Bekir Ersin &#214;ztekin

Reputation: 11

If I understood correctly your question this will solve your problem:

<button class="uk-button uk-position-bottom" data-process="0">Start search</button>

  <script>
                $(".uk-button").click(function () {

                    var $this = $(this);
                    var processStatus = $this.data("process");
                    //var search = new SiteSearch(); 

                    if (processStatus == "0") {
                        //you can trigger start function
                        $this.data("process", "1");
                        $this.text("Stop Search");
                    }
                    else if (processStatus == "1") {
                        //you can trigger stop function
                        $this.data("process", "0");
                        $this.text("Start Search");
                    }

                });
 </script>

Upvotes: 0

Amin Fazlali
Amin Fazlali

Reputation: 1237

Try this:

Html:

<button id="search-btn" "class="uk-button uk-position-bottom" onclick="toggleSearch()">Start search</button>

JS:

var searching = false;
function toggleSearch(){
   if(searching){
       search.stop();
       document.getelementbyid("search-btn").innerHTML = "Start search";
   }else{
       search.start();
       document.getelementbyid("search-btn").innerHTML = "Stop search";
   }
   searching = !searching;
}

Upvotes: 0

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

Here you have working code snippet for this:

$(document).ready(function() {
  function startSearch() {
     console.log('Here your start search procedure');
  }
  
  function stopSearch() {
     console.log('Here your stop search procedure');
  }
  
  $('.search-button').click(function() {
      var buttonSelector = '.search-button';
      
      if($(buttonSelector).hasClass('searching')) {
          $(buttonSelector).removeClass('searching');
          $(buttonSelector).text('Start search');
          stopSearch();
      } else {
          $(buttonSelector).addClass('searching');
          $(buttonSelector).text('Stop search');
          startSearch();
      }
  
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="uk-button uk-position-bottom search-button">Start search</button>

Upvotes: 2

Davide Gozzi
Davide Gozzi

Reputation: 121

i think this answer is the same as a previus posted question:

https://stackoverflow.com/a/10671201/7387232

with the little add that when the button is clicked the button has to change the onclick propriety maybe with a check

object.onclick = function() {
if(search.isRunning()) search.stop();
}

and viceversa :-)

Upvotes: 0

kingdaro
kingdaro

Reputation: 12018

Here's what I'd do: add an ID to the button, then query that button in the script and add a click listener to it. The script would keep track of whether or not a search is being done, then call search.start/stop() and set the button text accordingly.

<button id="search-button" class="uk-button uk-position-bottom">
  Start search
</button>

<script>
  const search = new SiteSearch()
  const searchButton = document.querySelector('#search-button')

  let searching = false

  searchButton.addEventListener('click', () => {
    if (!searching) {
      search.start()
      searching = true
      searchButton.textContent = 'Stop search'
    } else {
      search.stop()
      searching = false
      searchButton.textContent = 'Start search'
    }
  })
</script>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You can do this easily like below:

var $elem = $('.uk-button.uk-position-bottom');
var search = {
  //start function
  start: function(){
    //change the text
    $elem.text('Stop search');
    //change the click function
    $elem.attr('onclick', 'search.stop()');
    console.log('start clicked');
  },
  //stop function
  stop: function(){
    //change the text
    $elem.text('Start search');
    //change the click function
    $elem.attr('onclick', 'search.start()');
    console.log('stop clicked');
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="uk-button uk-position-bottom" onclick="search.start()">Start search</button>

Upvotes: 0

Related Questions