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?

Answer 1

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> 

Answer 2

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>

Answer 3

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

Answer 4

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> 

Answer 5

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

Answer 6

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>