Change button's text and function

Question

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?

Is there a stop search, or `search.stop()` method available? Is there any documentation you should have linked to that would help us understand what `SiteSearch()` is? What have you tried, how did it fail? What went wrong? How do you define 'elegant'? — David Thomas, Feb 14 '18 at 11:42

score 2 · Accepted Answer · answered Feb 14 '18 at 11:53

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>

score 1 · Answer 2 · answered Feb 14 '18 at 11:49

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>

Amin Fazlali · Answer 3 · 2018-02-14T11:53:43.607

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

score 0 · Answer 4 · answered Feb 14 '18 at 11:47

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>

score 0 · Answer 5 · answered Feb 14 '18 at 11:53

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 :-)

score 0 · Answer 6 · answered Feb 14 '18 at 12: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>

Change button's text and function

6 Answers6